Collective #524

Inspirational Website of the Week: Kubikfoto³ A great design with wonderful details and smooth transitions. Our pick this week. Get inspired This content is sponsored via Syndicate Ads Website Builder Software With Your Branding This B2B platform fits designers, freelancers, agencies and anyone who Read more

Finding UX Research Participants

dreamt up by webguru in Uncategorized | Comments Off on Finding UX Research Participants

Finding UX Research Participants

Finding UX Research Participants

Victor Yocco



For UX designers and design teams, research with stakeholders and users is critical. However, accessing research participants isn’t as easy as it sounds. For both professional and amateur researchers finding people to participate in studies can be an elusive task. We often hear about studies and their findings, but we don’t hear as often how researchers recruit study participants.

Researchers can choose from a variety ways to find participants. Many factors determine the best method to use. This includes resources such as time and money, the research method you’re using, the type or characteristics of participants you want to recruit, and the accessibility of these types of participants. In this post, I’ll remove some of the mystery and provide guidance to those interested in recruiting participants for qualitative UX studies.


Potential research participants are everywhere, if you know what to look for.
Potential research participants are everywhere, if you know what to look for.

Incentives

You can use incentives to increase the likelihood of participation in any of these methods of recruitment. Use of incentives is usually a personal choice. Do you feel incentivized participants provide skewed or biased data? I don’t have any issues with providing incentives. An incentive can be a small token of appreciation ($5 gift card) or something more substantial ($200 or more depending on time needed and type of participant.

I’ve provided guidance for each method based on my experience with incentives.

Identifying And Interviewing Key Internal Stakeholders

You gain insight when you interview key colleagues, clients, and other relevant stakeholders of a project. Particularly at the beginning of a project. This is a great opportunity to understand everyone’s role, what their vision and hopes are for a project or product, and how you might incorporate their experience into the rest of the project. You can increase buy-in and make people feel like part of the process by including stakeholder interviews in any project. I use the term internal stakeholder broadly to describe individuals who have a vested interest in a product or project who are connected to your organization or the product in some way. Many of these internal stakeholders might also be users of the product you are interviewing them about.

When To Use It

You can always look for opportunities to interview stakeholders and colleagues to learn more. This is especially useful at the beginning of a project. You can learn expectations for a product, background information on what led to the current status of the project, and goals and hopes for the future. Checking in with stakeholders throughout a project will keep them aware of how things are progressing and allow you to get their feedback. I’ve found this is helpful for building trust with stakeholders and making them feel included in the process.

How You Might Do It

You can often arrange interviews with key stakeholders yourself if they are internal to your company. You’ll identify who is relevant to your project, including project team members, and invite them to an interview. You can contact them to schedule a time, or look to schedule using your company’s shared calendar platform (e.g., Outlook or G Suite). You should know ahead of time how long you need to schedule and how you will interview the participant (in-person or remote) so you can share this information with them at scheduling.

Identifying and interviewing stakeholders becomes more complicated when you don’t have direct access to scheduling yourself. If your project team is part of a larger organization, you might need to ask colleagues in other departments to help identify and schedule stakeholders. If you are on a project team with outside partners or have external stakeholders, you will often need someone to facilitate identification and scheduling of interviews. I’ll cover some additional challenges for recruiting stakeholders and others through your clients in the identifying participants through a client section.

Positive Aspects

Gain insight into roles, backgrounds, and history of stakeholders’ involvement with a product or issue, potentially quick to schedule, low to no cost outside of time, can be done remote or in-person, talking to customer/user-facing stakeholders might provide some insight into what users think of a product.

Negative Aspects

Difficult to identify everyone you want to participate, might include people at high-levels who are hard to reach, scheduling if not doing it yourself, scaling down if resources are limited, does not replace research with users, many stakeholders are too close to their product to be objective.

Incentives

I typically don’t provide an incentive if internal stakeholders are participating during work hours.

Case Study

I worked on a project with a bank that wanted to design an online onboarding experience for new customers. We needed to understand what the current (non-digital) onboarding experience was. We wanted to document available resources to pull into the onboarding experience. Lastly, we needed to build trust with partners who we were going to rely on to champion the experience we created.

We relied on word of mouth to learn who we needed to speak with. First, we interviewed the people we were closest to and asked them who else they considered necessary for us to speak with. We spoke with people in numerous US states, both remotely and in-person. We were able to speak with 30 people in three weeks (this was not a project we were dedicating full time). Occasionally, we spoke to people who were not relevant to our specific purpose. There were two key reasons we were given names of some folks who weren’t relevant:

  • They were higher up executives with little knowledge of what we were exploring
  • The people referring them didn’t understand/effectively convey what we were trying to accomplish, so they volunteered to participate in something not aligned with their role

We found our most common difficulties were in scheduling and getting people to reply to our initial emails. We were trying to schedule an hour to speak with people who spend most of their days traveling and in meetings. Many of them had personal assistants managing their calendars. Some didn’t have an opening to speak with us for weeks after our initial request. Most people did want to make the time to speak with us. They viewed our project as one with high strategic importance in the long-term health of their company. We also had many people reschedule due to unforeseen conflicts involving client needs arising.

We were able to paint a clearer picture of the bank’s onboarding experience and what resources were available. We were able to understand what (some) of the leadership viewed as the potential future for an onboarding experience with new customers and what their perceptions of shortcomings were for the current onboarding experience. We were able to identify gaps in knowledge that required additional future research and education. We made connections with critical internal advocates who walked away with a better understanding and appreciation of the experience we were creating. We would not have been able to achieve these outcomes through a survey or through other means of recruiting participants. Later, we were able to approach these same stakeholders to have them provide feedback on the designs for the onboarding experience we created.

Identifying Participants Through A Client

Many potential research participants are unavailable to the general public. You will find situations where you don’t have direct access to recruiting relevant participants. This is particularly true if you work for a design consultancy/studio, or as part of a shared services team within a large organization. For example, if your client is a widget manufacturer and their product is a widget warehouse product supply application, you will need to access their staff in order to understand their current pain points and needs. You won’t have an easy time finding relevant participants using the population you have access to. You want to conduct research and usability testing with participants who will become the end user of the application, which again means you’d need to access this population through your client.

When To Use It

In addition to the reasons given in the previous section for recruiting stakeholders, when you have to reach specific populations, need opinions from specific people, and want to make your client-stakeholders feel like part of the process. When you don’t have direct insight or access to critical research participants when you are looking to build relationships beyond the project team you are working with, when you want to include a diverse set of individuals covering relevant areas of the product you’re working on.

How To Do It

Work closely with your client or person you are collaborating with to identify the right people for the project you are on. Your project will dictate the exact specifications of roles you need. This includes Product Owners, VPs, Business Analysts, and Users. I often provide a script or email language for my clients to use for recruiting participants. I explain the purpose of the research, how you were made aware of the participant (e.g., Jane from accounting gave me your information) how long the conversation is expected to take, potential dates of availability, incentive (if any), prep work required (if any).

You should provide your client with a screener clearly stating:

  • How many of each type of participant you want to participate
  • Details you want to know ahead of time (e.g., years using the product, industry)
  • Factors leading to disqualification from the study (e.g., less than one year of experience with the product)

Bonus: Many organizations keep data on their users. Your client might be able to screen their database and provide you research participants. However, when I’ve used this in the past, there are often many permissions required and processes to gain access to customers. This can add a significant amount of time to your project.

I am always clear to my clients that scheduling participants is one of the largest hurdles to a project’s timeline. Working with others’ schedules is complicated. You should make it clear to your clients how to recruit, and the need to start recruiting as soon as possible.

Positive Aspects

You get specific people close to a project or product, you learn about long-term and short-term goals directly from the people you work with, you are able to ask to follow up questions that might inform projects well beyond your current relationship, you learn the history of the product or organization, you can reach relevant people you don’t have direct access to, you gain insight into roles, backgrounds, and history of stakeholders’ and users’ involvement with an issue, you will find talking directly to the users of the product provides context and texture you wouldn’t find from someone without similar knowledge.

Negative Aspects

This can be time-consuming, requires a clear communication of purpose, you might end up talking to people less relevant if your client doesn’t screen effectively, less control over scheduling, lack of control over how information is shared with participants.

Incentives – I typically don’t provide an incentive if they are from the client and participating during work hours. I’d provide an incentive if they have recruited users who are coming in on an off day or outside of work hours. You might also have a larger incentive but only give it to a couple randomly selected participants.

Case Study

I worked for a team looking at redesigning a digital report for a large mortgage lender. Many other banks and loan providers do business under the umbrella of this company. We needed to identify a specific type of user, one who: worked for a bank under the parent company and used the report as part of their daily tasks.

The client wanted us to interview 30 individuals with roles interacting with the report. They identified a handful of these individuals upfront, and then put out a call for participation to identify the remaining individuals. There were numerous layers of communication through relationship managers as well as permissions and disclosures the client needed to handle with each participant.

We were able to complete over 30 remote (over the phone) interviews in the month we were allotted to collect data. Our client arranged and scheduled each interview. Our most common difficulties were similar to those I gave in the previous case study, scheduling and relevancy of participants. We were interviewing people who spend their entire workday running the report and using the data to inform their decisions; busy people with limited flexibility of daytime work hours. We made ourselves available at any time a participant had availability in order to solve this. This created drawbacks in scheduling other meetings unrelated to working on the project.

Some of our participants forwarded the invitation to others they thought should be on the interview as well. We would find this out when more than one person would join the call. We were initially caught off guard when we had a call intended for one person take place with four participants at once. We created a separate multi-participant protocol to account for this occurring on future calls, which it did. I recommend expecting this to happen regardless of who is recruiting your participants. It’s difficult to control what happens, once you send out an invitation to the wild.

We used data from our interviews to understand the current behaviors, frustrations, and needs of users. We also presented later participants with sample designs in order to get feedback on report layout and feature changes. We delivered a redesigned report that exceeded client expectations and became a reference piece in their quest to get further funding for research and design projects.

Paying A Recruitment Firm (When You Have An Accessible Population)

Recruitment firms offer services ranging from participant screening and recruitment, facilities to conduct research, recording your sessions, and much more. You can use a recruitment firm when you are conducting research with populations you believe you can reach through contact with the general public. For example, if you are conducting usability testing on an online banking application. You can expect most people familiar with banking transactions (e.g., making a deposit or bill pay) should successfully use your application. Even if they don’t currently use your bank.

I’ve used a number of firms over the past few years. Most of them offer similar services.


Recruitment firms often provide facilities for interviews or usability testing.
Recruitment firms often provide facilities for interviews or usability testing.

When To Use It

When you don’t have direct access to potential participants when you want to have a third party screen your participants, when your sample is available through the general public, when you want to have someone handle recruitment, scheduling, and day-of-research preparation.

How To Do It

You will need to create the screener the recruiter will use. You decide in advance how many of each type of participant you will want. You’ll want to include a number of “floaters” in your recruitment as well. Floaters are people who meet the requirements of the study and are willing to show up for participation in case some of the other participants don’t show up. Floaters are typically compensated at higher levels because they are committing to spend two or three hours sitting around in case they are needed.

You’ll also need to provide the screener with enough advance notice as the recruiter requires. I’ve found this is two weeks in advance for most studies, and three weeks in advance for more complex studies. All recruitment firms offer participants an incentive, usually cash, to participate in a study. You will have to be ok with the fact your participants are receiving money to participate. I haven’t found this to be problematic, but you should be prepared to defend why you don’t think this will add any additional bias to your data.

Positive Aspects

Very detailed screening, don’t have to find people, often have a facility you can use, will record audio and video as needed, will recruit additional participants in case some don’t show up.

Negative Aspects

Cost, the time needed in advance if you have a difficult to reach population, participants trying to game the system.

Incentives – Recruitment firms almost always compensate the people they recruit. You will pay the recruitment firm a set fee they pay to participants.

Case Study

I worked for a team wanting to define the digital needs and behaviors of specific types of Financial Advisors. The client did not want to expose their brand during any of the research, so they did not want to facilitate the recruitment. The client wanted the interviews to pull participants from more than one major city in the US. We worked with a recruitment firm to identify and recruit participants, as well as to conduct the interview sessions.

We worked with the client to create a detailed screener with items meant to refine the population to the specific participants we wanted for the study. The recruitment firm asked for three weeks to find 15 participants for the first city in our study. The usual turn around when working with the firm was two weeks with less specialized participants. We were also advised to provide a higher incentive, over double what we typically offered, due to the probability we were asking participants to step away from work and the perceived value of their time.

We were able to interview 15 participants over the course of two days. We found a few of the participants didn’t actually meet the qualifications we’d screened for. They had manipulated their responses to qualify. Our client was unhappy with this. We were able to use the floaters to replace the participants who didn’t truly qualify. We were also able to get a refund on what we’d paid to recruit the unqualified participants.

Ultimately, we reached our goal of interviewing the right number of participants in the right amount of time, and produced a report on needs and behaviors for our client.

We would not have been able to access this population without the use of the recruitment firm. The client was unwilling to expose their brand and therefore unwilling to identify participants from their contact list. We would have spent more time and money than the project allowed if we were left to recruit participants. We don’t have contact lists or the ability to easily identify specialized populations through our own resources. We still experienced frustration with the lack of initial quality participants the recruitment firm provided. In general, we’ve had positive experiences with recruitment firms, but the more specialized the population, the more likely you will find some duds.

Guerilla Recruiting (When You Want To Find People In The Wild)

You can utilize public spaces to recruit potential study participants. Guerilla research is a term for quick and dirty research conducted with people as they go about their daily tasks (in the wild so to speak). The term is meant to reflect a context in which you are pressed for resources. However, you can benefit from using this method of recruiting even when you have resources for other methods. Sometimes collecting data from people when they are in specific settings is the most appropriate method.


You can find plenty of potential users in the wild.
You can find plenty of potential users in the wild.

You should determine a space you want to recruit participants for a logical reason. Let’s say you’re designing a smartphone application meant to help people track their workouts at the gym. You would want to recruit participants from that setting, entering or exiting the gym. If you wanted to test out a new form of electronic payment, you’d want to be present in a setting where transactions take place.

When To Use It

When you have little time or budget, when you have access to relevant populations, when you only want to get quick feedback from a few people, when you can spend 20 minutes or less per participant, when you have a product related to a specific physical space (e.g., an art museum tour application).

How To Do It

Find a location, get permission if needed, create a script. I’ve previously written a detailed article on the specifics of recruiting participants in public.

Positive Aspects

Quick execution, the potential for multiple locations if you have the resources, small or large sample sizes, accessing relevant populations, compatible with multiple research methods.

Negative Aspects

Little ability for screening, approaching people takes practice and skill, potentially inclement weather if outside, a lot of standing around.

Incentives

I’d base the incentive on the amount of time and type of activity. For example, I might give a product discount code for something taking a minute or less. A $5 gift card if you are taking a few minutes of their time.

Case Study

I worked on a project examining the use of technology in library settings. Specifically, we wanted to understand the usability of a system for finding and locating materials within the library. We wanted to work with people who use a library. We needed to test inside of the library because the last part of testing involved physically locating the material.

We sent two researchers to spend multiple days at the library while it was open for patrons. We stood with clipboards at the entrance of the library. We asked patrons if they would spend a few minutes with us participating in our study. We then observed them using the system to search for an item and asked them to locate the material based on where the system told them it should be located.

Our biggest challenge was long periods of time where there were no new patrons coming into the library. We wanted to complete 30 to 40 sessions using three different scenarios. We had budgeted to spend one week onsite to get this many responses. We had to extend our timeline for the following week to reach our goal.

We were able to suggest improvements in the interface, terminology, and an explanation of where materials were located. We would not have had similar findings if we hadn’t been on location at a library and we might not have had as valuable insights if we used people who were not library patrons.

Friends And Family (Low On Time And Budget)

Sometimes, you might have very little opportunity to engage in research. There are many reasons for this, time, budget, or your working for a client who refuses to allow research as part of the project plan. The designers I’ve worked with still want to have some type of feedback to shape their thinking. You can still look to gather some meaningful data from those you have closest access to. Perhaps you are on a project where you are working on a product that is relevant to your coworkers or friends you have easy access to. You might ask a few of them to participate in interviews about the product.

Friends and family are the definition of a convenience sample, and should only be used when no other options exist. This is the most biased and least rigorous way of collecting data. However, you can still benefit from insights into experiences you might otherwise not get. You can use friends and family to participate in interviews or usability testing as a means of accessing informing your design. I strongly recommend conducting additional research, using one of the other methods of finding participants, as your design progresses.

When To Use It

As a last resort, when you have no budget, little time, yet you want to know something about the context or users you are designing for when you have access to relevant people to participate in the study. Background information of your participants.

How To Do It

Reach out to others you and your team know; you can include social media to distribute the call to participate, schedule a time to speak or send an email explaining what you’re asking participants to do (you can also distribute survey links this way)
Positive – you will get some feedback, almost instant, low budget

Negative Aspects

Most limited pool of participants, possibly less reach, you’re are relying on favors, less ability to screen for specific characteristics, introducing a larger bias due to familiarity with participants.

Incentives

I would incentivize based on time and budget. A $25 gift card is much less expensive than what you’d pay for a participant from a recruitment firm, but friends and family might find this amount acceptable for up to an hour of time.

Case Study

I was part of a project team responding to a (paid) request for proposals (RFP) from a major vacation industry company. We had two weeks to turn around our response, including design concepts to show our thinking. Most of our team had no experience in using the services from this specific industry. We needed to find out more information to help inform our response. We didn’t have the resources to undertake our typical research process of finding and interviewing stakeholders or representative end users. Instead, we reached out to friends and family members who stated they’d had experience in this vacation activity within the past three years.

We emailed our staff and asked if anyone had friends or family members with this qualification who’d be willing to engage in brief phone conversations about their experience. We conducted interviews with seven people over the course of the next two days. Our designers were able to use the insights we gained to better understand the types of needs users might have while vacationing. Our concepts attempted to address some of the issues our participants stated existed when they had experienced while vacationing.

Although we didn’t win the long-term work, our team was able to place among the top candidates. We credited the participation of friends and family in our research as part of what helped our design stand out in a positive way. We were later awarded separate work from the team we presented to for the initial RFP.

The table below provides a summary of key characteristics for each participant recruitment method I’ve covered in this article.

Time Cost Ability to pre-screen participants Ability to access participants
Stakeholder Slow Low Easy Easy
Client Recruits Slow Low Difficult Difficult
Recruitment Firm Slow High Easy Varies – harder to reach specific populations
Guerilla Recruiting Fast Free Difficult Easy
Friends & Family Fast Free Moderate Easy depending on topic

Table 1: Characteristics of common research participant recruitment methods

Conclusion

We need to access users and potential users in order to effectively conduct research. I’ve covered a number of common ways you can find research participants. Each has certain strengths and weaknesses. You’ll want to become familiar with each of these and adapt your approach based on your product, budget, and timeline.

Smashing Editorial
(cc, ra, il)

Source: Smashing Magazine, Finding UX Research Participants

Collective #403

dreamt up by webguru in Uncategorized | Comments Off on Collective #403


















C403_define

Define

A command-line dictionary (thesaurus) app with access to multiple sources, written in Go.

Check it out




C403_GridMenu

From Our Blog

Expanding Grid Menu

A CSS Grid powered menu with a box look inspired by the effect seen in the “Ableton Live 10: What’s New” video.

Check it out

Collective #403 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #403

Are Mobile Pop-Ups Dying? Are They Even Worth Saving?

dreamt up by webguru in Uncategorized | Comments Off on Are Mobile Pop-Ups Dying? Are They Even Worth Saving?

Are Mobile Pop-Ups Dying? Are They Even Worth Saving?

Are Mobile Pop-Ups Dying? Are They Even Worth Saving?

Suzanna Scacca



The pop-up has an interesting (and somewhat risqué) origin. Were you aware of this? The creator of the original pop-up ad, Ethan Zuckerman, explained how it came into being:

Specifically, we came up with it when a major car company freaked out that they’d bought a banner ad on a page that celebrated anal intercourse. I wrote the code to launch the window and run an ad in it. I’m sorry. Our intentions were good.

Basically, the client was dissatisfied with having their ad placed beside an article discussing this less-than-savory subject. Rather than lose the ad revenue or, worse, the client, Zuckerman and his team came up with a solution: The car company’s ad would still run on the website, but this time would pop out into a new window. Thus, the pop-up gave the advertiser an opportunity to share their offer without the risk of sitting next to a competitor or unsuitable blog content.

Origin story aside, does Zuckerman have anything to apologize for? Is the pop-up in its current state such a bad thing for the user experience? With a few simple searches around the web, you might very well begin to believe that.

For instance, a search of the term “pop-up ads” in Answer the Public comes up with this disheartening response:

Answer the Public questions about pop-ups

Users clearly just want pop-ups to go away. (Image: Answer the Public) (View large version)

A search for “I hate pop-ups” on Google results in over 3 million pages and responses like this:

Google search for 'I hate pop-ups'

You can bet that a search for ‘I love pop-ups’ doesn’t have quite the same results. (Image: Google) (View large version)

With the seemingly abundant negative responses to pop-ups, does this mean the pop-up is dead? Google’s 2017 algorithmic update penalizing certain types of mobile pop-ups could very well spell their doom — though I’m not ready to throw in the towel yet.

So, today, I want to see what the research says.

Are mobile pop-ups dying? Or will they simply undergo another adaptation?

If they continue to remain effective, how should designers make use of them, especially in mobile web design?

Finally, are there alternatives web designers can start using now to prepare for Google’s vision of a more mobile-friendly digital world?

Is The Mobile Pop-Up Dead? What The Experts Say

Pop-ups have come a long way since their founding by Zuckerman in the ’90s.

For the most part, pop-ups don’t force users out of the browser, nor do they surprise them with a desktop cluttered with ads once the browser is closed altogether. It’s a neater and more controlled experience overall. And we’ve seen them in a variety of forms, too:

  • full-page interstitials,
  • partial modal pop-ups,
  • top- or bottom-aligned bars,
  • pop-out modules tucked in the corner of the page,
  • push notifications,
  • inline banners found within the actual content of the page.

Pop-ups can also now appear at various points throughout the journey, thanks in part to big data and AI:

  • appearing as soon as the web page loads;
  • appearing once the user scrolls down the page;
  • appearing once the user moves the cursor to the close button in the browser tab;
  • ever-present, sitting off to the side, waiting for engagement.

But this type of pop-up technology doesn’t work all that well with the mobile experience, does it?

Take Macy’s website. Upon entering it, you’ll encounter this pop-up ad within a few seconds:

Example of Macy’s modal pop-up on desktop

Macy’s displays this offer within a few seconds of your arrival on the website. (Image: Macy’s) (View large version)

When you open the website on mobile, however, you won’t find any trace of that pop-up. Instead, you’ll see a small bar built into the space just below the navigation bar:

Macy’s inserts desktop pop-up into mobile on-page content

Macy’s ditches the pop-up on mobile and integrates it in the content. (Image: Macy’s) (View large version)

The offer is similar, but with no request for an email address and no pop-up functionality. This is likely because of the change to Google’s algorithm in 2017.

Which brings me to what the experts say about pop-ups. While most are focused on the life expectancy of pop-ups in general, Google has been leading the charge against mobile pop-ups (sort of) for almost a year now:

Google

Let’s start by looking at Google’s announcement regarding mobile-first indexing. This originally came to light in 2016, but it was just talk at the time. It is now over a year later, and Google has begun rolling out this indexing initiative.

Basically, what it does is change how Google’s bots crawl and index a website. Google no longer views the desktop version of a website as the primary experience for users. Going forward, the mobile website will be the primary version indexed.

With Google users increasingly starting on a mobile device instead of desktop, this move makes sense. It’s also why the algorithm change in 2017 that penalizes certain types of mobile pop-ups was another logical move in Google’s mission to make the web a more mobile-friendly place.

Google diagram of penalty pop-up designs

Google provides examples of the kinds of interstitial pop-ups to avoid. (Image: Google) (View large version)

In laying out the details of this change, Google explained that mobile pop-ups deemed disruptive to the user experience would result in ranking penalties for those websites. These kinds of pop-ups fall into three categories:

  • interstitial pop-ups that cover the entire screen upon entering the website and that require users to “X” out in order see the actual website;
  • pop-ups that cover the entire screen upon entering the website but that require users to know that scrolling past them is the way to bypass the pop-up and see the main content;
  • any pop-up that hides the majority of content on the page behind it.

In other words, Google doesn’t believe that traditional pop-ups have any place on mobile because the limited screen space would make the experience too disruptive. That’s likely the reason why you’re seeing popular websites like Macy’s do away with mobile pop-ups altogether. Though there are some traditional modal pop-ups Google doesn’t mind, it’s probably safer to avoid modals and interstitials on mobile in order to avoid the chance of a penalty.

As you can see, pop-ups for legal requirements are still OK, although most of the time you’re going to see publishers relegate them to small bars, as MailChimp has done here:

Example of an acceptable cookies disclaimer on mobile

MailChimp adheres to Google’s new guidelines in providing a cookies disclaimer. (Image: MailChimp) (View large version)

Nielsen Norman Group

In 2017, Nielsen Norman Group conducted a survey on the most hated advertising techniques. This study encompassed all kinds of website advertising (including video ads, on-page banner ads, etc.), but there was special mention of pop-up ads that make the findings relevant here.

Out of a total score of 7, with 1 being “strongly like” and 7 being “strongly dislike,” respondents gave mobile ads a score of 5.45. Desktop ads weren’t far behind, with 5.09, although the survey results did consistently show that mobile ads were more despised than their desktop counterparts.

Comparison of desktop and mobile ad hatred

Users might despise ads, in general, but they really don’t like them on mobile. (Image: Nielsen Norman Group) (View large version)

Drilling down, Nielsen Norman Group also found modals (i.e. partially covering pop-ups) to be the most hated type of ad that mobile users encounter:

: Chart that shows mobile ad dislike ratings

Oof! Users really don’t like modal pop-ups, do they? (Image: Nielsen Norman Group) (View large version)

Why does Nielsen Norman Group believe this to be the case? Well, there’s the aforementioned real estate issue. Mobile phones just don’t have enough room to accommodate modal pop-ups without overwhelming users. According to the authors, though, there may be another reason:

Additionally, the context of mobile use tends to be “on-the-go” — that is, users are more likely to be distracted by competing stimuli, and the need for efficiency is drastically increased.

Having reviewed Nielsen Norman Group’s research, I do agree that many users will very likely be put off upon encountering a pop-up on a mobile website. That being said, plenty of research provides a valid counter-argument.

While users might be likely to describe their annoyance with pop-ups as high when surveyed about it, some evidence suggests it is short-lived for many of them. As we’ll see in a moment, pop-ups are actually quite effective in driving conversions.

Sumo

Sumo declared in 2018 that pop-ups aren’t dead. While that opinion might be seen as biased, considering it’s in the business of creating and selling list-builder tools such as pop-ups, welcome mats and smart bars, it does have evidence to suggest that pop-ups are still worthwhile if generating leads and conversions is your top priority.

Sumo used data from nearly 2 billion customer pop-ups to make this argument. Sadly, the data doesn’t directly break out anything related to mobile pop-ups and their conversion rates, but I found this particular statistic to be relevant:

Of the top 10% of pop-ups, only 8% had pop-ups appear in the 0-4 second mark. And the majority of those 8% were on pages where the pop-up was expected to appear quickly — as in sending someone to a download page.

In other words, users don’t want to be rushed into seeing your pop-ups — which is one of the major points Google is trying to make with its algorithm update. (Tests conducted by Crazy Egg mirror this point about delaying pop-ups.) Mobile websites that jump the gun and present visitors with a pop-up message before giving them an opportunity to scroll through the website are just creating an unnecessary disruption.

Another point that Sumo stresses is that pop-ups need to be valuable and presented within context. This is especially important on mobile, where you can’t afford to test visitors’ patience with a video pop-up completely unrelated to the blog post they were trying to read beneath it.

In other words, always think about how a pop-up will add value to the experience that you are (partially) blocking.

Justinmind

Justinmind calls modal pop-ups “complicated,” and for good reason. Even though there was nearly an even split between how users felt about pop-ups (21% said they liked them, while 23% said they didn’t), the research shows that pop-ups have proven to be quite helpful in the conversion process.

That being said, what a lot of this comes down to is how a website uses the pop-up. The University of Alberta, for example, was able to get 12% to 15% more email subscribers by using a pop-up on its website. On the other hand, you have Search Engine Land claiming that the main reason people block websites is because of pop-up ads.

Another thing to think about, according to Justinmind, is the mobile UI. It suggests that even if you do everything else right — deliver a valuable and well-timed offer and compromise an unobtrusive amount of space — there’s still the thumb zone to think about.

While it’s great that designers have built the ever-trusty “X” button into the top-right corner of pop-ups, that’s not the easiest stretch for the mobile user’s thumb. If you want to design ads for the mobile UX, consider another placement of that exit button.

30 Lines

Digital marketing agency 30 Lines claims:

Our clients who run targeted lead capture pop-ups on their websites typically convert anywhere from 75-250% more leads from their sites than clients who don’t.

Unlike other experts who have shied away from the subject of mobile pop-ups (because it might end in them admitting defeat), 30 Lines took on the topic head on. And this was the point they sought to make:

  • Google is not saying that mobile pop-ups are all bad.
  • Google, in fact, does want you to generate more conversions on your website — and it acknowledges that pop-ups might play a role in that.
  • It’s simply up to you to determine what will lead to the most unobtrusive experience for your visitors.

30 Lines gives a lot of great tips on how to adhere to Google’s principles without doing away with mobile pop-ups altogether. As we move on to discuss ways in which designers can use mobile pop-ups in the future, I’ll be sure to include them for consideration.

What Do Web Designers Do With Mobile Pop-Ups Now?

I’m not going to lie: This is a tough one, because while it would be so easy to just kill pop-ups on mobile websites altogether — and many consumers would be thrilled with that decision — they do still have incredible value in generating conversions. So, what do we do?

Clearly, this is a complicated matter, because you could equally argue both sides and are left choosing between two evils:

  • Do you want to run mobile pop-ups in the hope of gaining more subscribers (especially considering that mobile users tend to have lower conversion rates to begin with)?
  • Or do you want to put more resources into writing high-converting landing pages and on-page banners to sell and convert mobile visitors?

Do you even know which option mobile visitors would be more receptive to?

Below are questions to think about as you evaluate whether pop-ups make sense for your mobile website now and in the future.

Is It Necessary?

Ask yourself whether a particular message even needs to be in a pop-up format. If it could work just as well integrated in a page, then you might want to skip it entirely (as in the Macy’s example from earlier).

Fast Company uses pop-ups on its mobile website (shown below), but it also integrates its contact forms into on-page banners, like this one:

Example of a subscriber form that could be in a pop-up but isn’t

Fast Company inserts a subscriber form inline with the content. (Image: Fast Company) (View large version)

Different Designs

Create different pop-up designs for desktop and for mobile. So long as the message and offer are still relevant and valuable to mobile users, there’s no reason not to completely start from the ground up when building mobile pop-ups. Just be sure to think about the design, message and trigger rules when reshaping desktop pop-ups for mobile.

Gap is a good example of this. You can see how its offer is displayed on desktop as an on-page banner with expanded details:


Gap desktop pop-up ad
This is how Gap displays this offer on desktop.

Then, on mobile, it is shown as a bottom bar element:

Gap mobile pop-up ad

This is how Gap displays this offer on mobile. (Image: Gap) (View large version)

Go Small

Keep pop-ups small on mobile. In general, it’s recommended they take up no more than 15% of the screen. This means staying away from full-page interstitials, even if you’re trying to sneak them in on a second or third page.

Inc has a small and succinct message for mobile users:

Example of bottom bar pop-up

Inc keeps its pop-up message bold but brief. (Image: Inc) (View large version)

Target Mobile Context

Use mobile-targeted messaging. This means be very light on text, and don’t include images or icons that force the pop-up to be larger than it needs to be. You can also create targeted messages for consumers who use your website for research while out and about or even while shopping in house.

Stick To The Bottom

To play it safe, display pop-ups only at the very bottom of a page. This could mean one of two things. First, you could align the pop-up to the bottom of the mobile screen (this could be a traditional modal pop-up or a hello bar). Here’s an example of how Fast Company does it:

Example of how a modal pop-up works on mobile

Fast Company doesn’t shy away from modals with this mobile pop-up example. (Image: Fast Company) (View large version)

The second option is to open the pop-up once the visitor has scrolled all the way to the bottom of the web page.

Delay

Try not to show a pop-up on the first page a visitor sees. By this, I mean the first page that a user is directed to by search or a referral website (which is not necessarily the home page). Also, don’t forget about timing. In general, try not to load a pop-up within the first four seconds of a visitor arriving on a page.

Intuit does this really well:

Example of delayed mobile pop-up

This Intuit pop-up only appears after you’ve navigated inwards on the website. (Image: Intuit) (View large version)

Visit the first page of the website and you won’t encounter any kind of pop-up messaging. Click through to learn more about pricing, and then you’ll see a relevant and value-adding message pop up at the bottom of the screen.

Easy Exit

If you still want to use a modal pop-up design, make sure it’s easy to exit out of. This means putting an “X” in the bottom-right corner or an exit message beneath the CTA.

Or you could stick with the bottom bar design that many mobile web designers seem to favor right now, like Zumiez:

Example of hello bar pop-up on mobile

A bottom-aligned hello bar pop-up from Zumiez. (Image: Zumiez) (View large version)

The New Yorker also does this:

Example of bottom bar pop-up content on mobile

A bottom-aligned hello bar pop-up from The New Yorker. (Image: The New Yorker) (View large version)

Make It Optional

Create a special CTA or other interactive element on your website that, only when clicked, opens a pop-up. Basically, let mobile users decide whether and when they want to interrupt the on-site experience.

Basic Outfitters does this after you’ve added your first item to the cart:

Example of a user-triggered mobile pop-up

The Basic Outfitters pop-up shows only after the user actively triggers it on the website. (Image: Basic-Outfitters) (View large version)

Consider Alternatives

If you’re nervous about designing a traditional pop-up on your website, fear not. There are alternatives.

Consider push notifications and SMS notifications. They allow you to reach mobile users without having to intrude in the browser or in the mobile device experience without their express permission.

Gated content is another way to collect leads on a mobile website without having to force users into a pop-up to submit their contact information.

Track Preference

You will more likely annoy a mobile user with a repeat pop-up ad than a desktop user. So, if you can use cookies to prevent mobile visitors from being interrupted by the same pop-up message after they’ve dismissed it, that would be ideal.

Remember: You’re not just playing by Google’s rules here. If mobile visitor numbers drop off and Google spots a change in your bounce rate and time-on-site statistics, then your website’s rank will suffer as a result, since Google now prioritizes the mobile website experience over desktop.

The Mobile Pop-Up Doesn’t Need To Die

For now, the best plan is to heed the experts. And what they’re saying is that mobile pop-ups aren’t dying. In fact, they can still play a vital role in signing up more email subscribers and converting more customers from mobile devices. But, as with anything else, you need to play by Google’s rules and always think about how your decisions will affect your users’ experience.

So, use your mobile pop-ups wisely.

Smashing Editorial
(da, ra, yk, il, al)

Source: Smashing Magazine, Are Mobile Pop-Ups Dying? Are They Even Worth Saving?

Designing For The Tactile Experience

dreamt up by webguru in Uncategorized | Comments Off on Designing For The Tactile Experience

Designing For The Tactile Experience

Designing For The Tactile Experience

Lucia Kolesárová



The focus of digital technology in the last few decades has neglected human hands and bodies to a large extent. Our thoughts and feelings are strongly connected to the gestures, postures, and actions we perform. I aim to push you — as a designer — to think outside of the zone of screens.

I’d also like to ask you to start thinking critically about current technologies; touch and motor skills need to be taken into consideration when designing your very next product. Allow me to explain why.

Less Haptic Stimuli, Less Experience

According to Finnish neurophysiologist Matti Bergström, quoted in a lecture of Sofia Svanteson:

“The density of nerve endings in our fingertips is enormous. Their discrimination is almost as good as that of our eyes. If we don’t use our fingers during childhood or youth, we become “fingerblind,” this rich network of nerves is impoverished — which represents a huge loss to the brain and thwarts the individual’s development as a whole. Such damage may be likened to blindness itself. Perhaps worse, while a blind person may simply not be able to find this or that object, the fingerblind cannot understand its inner meaning and value”.

Hold, Push, Swipe, Tap

If you end up as a typical white-collar worker, you’ll probably spend a significant part of your day looking at your screen, without any possibility of physically touching the things you work with. How much time do you spend on your computer at work? How much time do you spend on your phone afterwards. What about during your spare time: What do you do during those hours? Hold, push, swipe, tap.

The word “touch” is in the word “touchscreen,” but tapping and swiping a cold flat piece of matter basically neglects the sense of touch. You are capable of experiencing only a fraction of what your sense of touch allows you to during the long hours of manipulation with touchscreens.

What actions do you physically perform with your body? Perhaps you are not a very active person. What posture are you usually in? What kind of impact can sitting over the screen of a mobile phone or computer all day have on a person? Pablo Briñol, Richard E. Petty and Benjamin Wagner claim in their research article that your body posture can shape your mind.

“… We argue that any postures associated with confidence (e.g., pushing one’s chest out) should magnify the effect of anything that is currently available in people’s minds relative to postures associated with doubt (e.g., slouching forward with one’s back curved).”

As the theory of embodied cognition states, your body affects your behavior.

Tactile Feedback

Many tangible things are disappearing from our surroundings and reappearing in digital form. They are improved upon and enriched with new functions that would not be possible in the material world. A few examples are maps, calendars, notebooks and pens, printed photos, music players, calculators and compasses. However, with the loss of their material form comes also the loss of the sensations and experiences that only physical interaction with objects can give us. The “… disembodied brain could not experience the world in the same ways that we do, because our experience of the world is intimately tied to the ways in which we act in it,” writes Paul Dourish in his book Where the Action Is.


Man holding an open book
Fingers are able to sense the progress of a book (Image: <a href='https://unsplash.com/@nordwood'NordWood Themes on Unsplash) (View large version)

Different Activities, Different Movements

Consider some actions we perform in the physical world:

I pay for a ticket. I pull my wallet out of my bag. I open it and take out banknotes. While holding the notes in one hand, I draw some coins with my other hand. I give the money to the salesperson.

I confess love. I sit or stand opposite to the person. I look into their eyes. I blush. I say, “You know, I love you.” I am kissed.

I look for a recipe. I choose a cookbook from the shelf. I take the book. I flip a few pages, forwards, backwards. I find a recipe.

Whereas in the world of screens:

I pay for a ticket. I fill text fields. I hit a button.

I confess love. I fill a text field. I hit a button.

I look for a recipe. I fill a text field. I hit a button.


Man with rings on his fingers holding paper notes and cigarette
(Image: Jeremy Paige on Unsplash) (View large version)

The environment surrounding us, the activities we perform and the things we come into contact with help us to perceive situations more intensely and meaningful. Phenomenologists such as Husserl, Schutz, Heidegger and Merleau-Ponty have already explored the relationship between embodied action and meaning. “For them, the source of meaning (and meaningfulness) is not a collection of abstract, idealized entities; instead, it is to be found in the world in which we act, and which acts upon us. This world is already filled with meaning. Its meaning is to be found in the way in which it reveals itself to us as being available for our actions. It is only through those actions, and the possibility for actions that the world affords us, that we can come to find the world, in both its physical and social manifestations, meaningful.” Another quote from above-mentioned book by Paul Dourish.

Because so many different activities are being carried out in the same manner in the digital world, their value is becoming less clear. I believe that haptic sense has something to do, for instance, with the perception of paying by “real” or by virtual currency — that feeling of something tangible in your hand that you are giving to someone else, compared to just tapping a flat surface to confirm that the number on the screen will be deducted from your account.

Try a simple task. Suppose you want to remember something. Write it down and see how it affects your brain. Professor Anne Mangen, who studies the impact of digital technologies on reading and writing, has shown that writing helps your brain process information and remember it much better. Physical sensorimotor activities create a stronger connection to performed tasks. That’s probably one of the reasons why paper planners are seeing a rise in sales. Sales of paper books are also rising. Giving a digital book as a gift is much less impressive than giving its paper equivalent. This points to an interesting phenomenon. Physical presents just “feel” much better. There is a trend of returning to “tangible music”, which caused an increase in vinyl sales. But are those returns to “old forms” enough? Or can we act also from the current opportunities?

Designing For Touch

How can we create more material experiences in design? What are some tangible solutions, solutions that solve problems through our senses, through our contact with the physical, material world, solutions that let us act in our surrounding as much as possible without using our smartphones or any other flat screens? There are many possible ways to get back to the physical experience.

1. Interact With Digital Technology in a More Human Way.

Make digital information tangible. Interact with it by hand gestures and movements in the material world.

One of the most famous pioneering projects with that aim was SixthSense. Back in 2009, it linked digital devices and our interactions with the physical world. This kind of wearable technology consisted of a camera, a projector hanging on the user’s neck, and color markers stuck to their fingers. The user could dial a phone number using projected keys on their palm, while the camera would record their finger movements. They could read newspapers showing live video news, or draw a circle on their wrist to check the time. The whole principle was to project visuals into the world surrounding the user. With current technology, however, that principle has transformed. The outside world is no longer altered by some projection. The only altered thing is our vision. It’s enhanced by a new layer of augmented reality (AR), by special kinds of glasses, and there is a completely new reality created in virtual reality (VR) headsets.


Finger dialing number on a palm with projected numbers
Using a palm to dial a phone number. (Image: pranavmistry.com) (View large version)

A more modern example is Magic Leap, a secretive project that connects virtual reality and the “real” world in a mixed reality. You can see objects in your surroundings that are not part of your reality — for example, jellyfish flying in your room. This device is exceptional because it also enables hand tracking. You are able to shoot robots falling from your ceiling, holding a real plastic gun in your hand, meanwhile controlling the interface with hand gestures. This is big progress from mostly sequential activities, which screen interfaces enable the user to do. We are getting there.


Two open palms hold a tiny elephant
Magic Leap connects ‘real’ and virtual. (Image: magic-leap.reality.news</a) (View large version)

Mixed, VR and AR projects could be the future. The good thing is that these technologies are built with a huge emphasis on human behavior, psychology, physics laws and ergonomics. The experience is lived, not just observed on a screen. They are not tearing you away from the natural (or virtual) environment and sticking you in a chair to stare into a flat square. You get involved in the action, immersed in doing things and feeling emotions. All of these technologies bring you experiences. Whether they’re real or not, you will remember them as things that happened to you.

Another advantage is that they make your body move — for example, by replacing your physical screens with virtual ones. They allow you to do your work practically everywhere, possibly on the move as well. Whether you are 3D painting with a virtual brush, throwing squares (a VR game) or organizing your desktop, you are using your fingers, your hands, your wrists and whole body movements. Technology is finally adapting to you.

2. Involve More Sensory Experiences In Your Design.

If sight sensors are already occupied by some functionality, don’t add more visual stimuli. Better to include some haptics, hearing or even olfactory stimuli — thus, creating so-called multi-sensorial design. As noted in their book Product Experience, Hendrik N. J. Schifferstein and Paul Hekkert state, “By now, many different studies have suggested that the greater the number of sensory modalities that are stimulated at any one time, the richer our experiences will be.”

Let’s discuss the topic of virtual reality further. Even though it doesn’t feel like virtual could satisfy the need for material or tangible experience, VR is a perfect example of connecting several senses together, not only sight and hearing, but also touch.

There are a couple of different ways to bring touch into VR:

  • The classic primitive controllers
    They give you the sense of being present, just like holding a mouse, i.e. it’s one object but has a single point of interaction. Well, it actually has two controllers that are controlled by two hands. Still, the full potential of your hands and ten fingers is not being used in this case.

Girl with VR head-mounted display and controllers in her hands and girl holding wire
Classic VR controllers. (Image credit) (View large version)
  • Haptic gloves
    These enable you to feel objects from VR in your hands. The sensors translate touch sensations into vibrations that enable you to perceive the shape of an apple or to experience rain. You can even feel the release of a virtual arrow. Obviously, all of these sensations are not the same as real ones in their fidelity. But as a whole virtual reality, they pose a question: What does it mean to be real? What makes for a real touch experience — a real touched object made of realistic, tangible material or a real feeling transmitted by neurons to your brain? Is it enough to fool your brain, without even using your hands? This is maybe the moment when we can ask, Are we just brains or whole bodies?

Set of images of man with haptic VR gloves
Haptic VR controllers still look a bit utopian. (Image: dextarobotics.com) (View large version)
  • Combining haptic gloves with material objects
    Various games layer VR over a physical playground. One of them is The Void. As a player, you wear a vest with 22 haptic patches that vibrate and shake you at the right times. The idea is that you are playing the game in VR but all of your surroundings are tangible, so instead of seeing four empty walls, you see a large territory around you. A big stone would be perceived as a mountain, and a normal door could be transformed into a magic one. But opening the magic one would feel real because, in the end, it is. All such little gimmicks with sight, touch, hearing and even smell involve more sensory experience and make VR even more immersive.

Man touching big rock with shining symbol
The Void game (Image: thevoid.com) (View large version)

3. When Designing For The Screen, Think About How the Task Could Be Performed In The Physical World Instead.

How would people act in their most “natural” way?

Time tracking is not always pleasant, maybe because you feel like a robot from constantly checking the time or opening and closing your time-tracking app. ZEI is a great example of tangible design. The developers found a way to get robots to do our job in the background so that we can act more like humans. This time-tracking device is an octahedron (eight sides). Each face is assigned one activity, so you can easily track time spent on different projects just by flipping it. It presents a very natural way to switch from task to task and to turn your attention from one thing to another.


Hand reaching for ZEI tracking device
ZEI moves screen tasks to tangible reality. (Image: timeular.com) (View large version)

When you’re designing a product, think of how users would perform without it. How do people track their work? Maybe they tend to take notes. How did people used to complete tasks in the past? Did we stand up from our chair and stretch a bit? What if every accomplished task were to be followed by a small exercise or at least standing up, to support users’ health? Many ridiculous ideas will probably appear in that kind of process, but you can get much closer to designing products for humans with such a human approach.

4. Transfer Your Digital Product To Tangible Experiences.

If you already have a product, program or app designed for the screen, think of whether there is some possibility to convert it to the physical world.

Computers made it possible to compose music by using various musical instruments that exist only in the digital world. But the dynamics of physical contact with the instrument cannot be replaced by using a computer mouse. Physically pushing keys on a piano or hitting drums with drumsticks, fast or softly, using mostly just your fingers and wrists, or blasting drums with your forearms and whole arms — these are experiences that seem to be non-transferable to computer programs.

Ableton, the well-known producer of software for music production, decided to create its own hardware, Ableton Push. The second edition of Ableton Push “puts everything you need to make music in one place — at your fingertips.” Push is basically a table with pads and controls that enable you to play drums or pitched instruments on one device. It offers a range of ways to play and manipulate samples, allowing you to capture ideas quickly. No technology stands in the way, and you can physically interact with music once again.


Man touching Ableton Push device
Ableton Push (Image: ableton.com) (View large version)

5. Think the Other Way Around: How Can You Upgrade Things That Already Exist With Some Digital Experience?

Classic toys, board games, paper books and notebooks, musical instruments — all of these have served us for decades and are beautiful, efficient and playful. However, many of them are disappearing because they are no longer attractive enough and are unable to compete with the digital experience. Sustain them. Upgrade them with some digital value and experience.

Playing with wooden toys is one of the best experiences for children. Their material and shape develop children’s building capacity and hand muscles. Their simplicity stimulates children’s imagination and creativity. We should not give up these benefits for a flat screen. Studio deFORM’s project KOSKI, a building block game, “connects the physical world and the digital gaming world together.” Physical, wooden toy blocks are mirrored in an iPad app and enhanced with imaginative worlds, characters and stories on the screen. The player physically alters the projected world on screen by manipulating the blocks in the real time.

While we can argue about whether this game develops a child’s imagination, I find it to be a good alternative to current tablet games.


Tablet mirroring kids playing game KOSKI, enhanced with imaginative plants, figures and waterfall
KOSKI (Image: koskigame.com) (View large version)

We’re already used to old-fashioned things. There’s no need to teach users new design patterns or ways of communication with hi-tech novelties. Everyone knows how to use a paper notebook. But often when I want to write with a pen on paper, I have to think twice about it. I know that, in the end, it will have to be rewritten in some digital form so that it can be easily shared and stored. This issue was tackled by Wacom with its notebook digitizer. Its solution was the SmartPad, which converts handwriting into digital files. It also offers the possibility to combine pages of notes and to edit them.

Even existing material can take on new qualities when enriched by the digital experience. Mixing together unexpected things can create very non-traditional objects. Consider FabricKeyboard, made by MIT Media Lab’s Responsive Environments Lab. As Meg Miller explains:

“This fabric made from textile sensors allows you to play the keys like one would on a normal keyboard, or you can create the sounds by manipulating the fabric itself — by pressing, pulling, twisting and even by waving your hands above the material. The e-fabric responds to touch, pressure, stretch, proximity and electric field.”


Man's hands stretching FabricKeyboard
FabricKeyboard (Image: Irmandy Wicaksono on MIT Media Lab) (View large version)

Finally, let’s consider one more reason why we should think carefully before letting traditional objects vanish away. They’ve been created from years of experience. They’ve evolved into their current form, one that fits their purpose very well. Think of how usable, convenient and pleasurable many printed books are. The rules of layout and typography from this established medium have been transferred very quickly to ebooks and web design, which are struggling to meet the standards of their physical counterparts. Think also of the non-transferable qualities: the tactile sense of progress, their collectibility, the sensuous aspects.

Some old-school materials are worth keeping, and their development should continue even in the digital era.

Tangible Future

As Andrea Resmini and Luca Rosati write in their book Pervasive Information Architecture:

“We are swinging like a pendulum. Fifty years ago we were rooted in material world. When you wanted to know something, you asked some person or read a book. Then desktop computers became our interface of choice to access information, and now we are swinging back to the real world, but we are bringing computers along. Information is becoming pervasive.”

One way to bring qualities of the real world to our daily used technologies is to learn from material things. Another way is to suss out the attributes we are missing in our interaction with screens. Let your senses lead you, and think about a solution that can replace a current discomfort. The classic human-centered approach still works. However, as advanced technologies improve and extend into multiple areas of our lives, we need to think more carefully about what it means to be human. Our bodies and senses are definitely a part of it.

Smashing Editorial
(cc, ra, al, yk, il)

Source: Smashing Magazine, Designing For The Tactile Experience

A Journey Through The World Of Music (April 2018 Desktop Wallpapers)

dreamt up by webguru in Uncategorized | Comments Off on A Journey Through The World Of Music (April 2018 Desktop Wallpapers)

A Journey Through The World Of Music (April 2018 Desktop Wallpapers)

A Journey Through The World Of Music (April 2018 Desktop Wallpapers)

Cosima Mielke



A song can wake memories, give you an energy boost, or inspire you. It can help overcome a creative trough or make a beautiful moment even more beautiful. To pay tribute to the music you love, we announced the “Illustrate your favorite song” wallpapers challenge a few weeks ago. And, well, today, we’re happy to present the lucky winner.

The idea behind the challenge was to design a desktop wallpaper for April 2018 in which you tell us a little story about your favorite song. What is the song about? What images arise in your head when you listen to it? How does it make you feel? Is it bold and full of energy or calm and relaxing? Artists and designers from across the globe took on the challenge, and, well, the results are a colorful journey through the world of music — earworms guaranteed. So without further ado, let’s dive right in.

Bunnies ahead!

The fluffy little fellows are an unmistakable sign that Easter is here, and, well, we’ve got a wallpapers post dedicated entirely to them and their companions in crime, the small, yellow chicks. Happy Easter! →

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

And The Winner Is …

Nikes On My Feet

Nikes On My Feet

PopArt Web Design from Serbia designed a wallpaper based on the song ‘Nikes on My Feet’ by Mac Miller. A great reminder to put on your shoes, get outside, and embrace spring.

“We got inspired by the song ‘Nikes on My Feet’ by Mac Miller, which was perfect for the upcoming month of April and the warm weather that spring brings. As Mac Miller said, ‘All I really need is some shoes on my feet…”

Download the wallpaper:

Congratulations, dear PopArt Web Design team! You won a ticket to one of our upcoming SmashingConfs. We’re already looking forward to meet you there. In San Francisco or Toronto, maybe?

More Submissions

A big Thank You to everyone who participated. Keep up the brilliant work!

Wildest Dreams

“We love the art direction, story and overall cinematography of the ‘Wildest Dreams’ music video by Taylor Swift. It inspired us to create this illustration. Hope it will look good on your desktops.” — Designed by Kasra Design from Malaysia.

Wildest Dreams

Yellow Submarine

“The Beatles — ‘Yellow Submarine’: This song is fun and at the same time there is a lot of interesting text that changes your thinking. Like everything that makes The Beatles.” — Designed by WebToffee from India.

Yellow Submarine

Learning To Fly

“Man has always wanted to fly like a bird and his striving for freedom is remarkable. After watching this song from Pink Floyd, I wanted to jump off a cliff and become an eagle so many times as a kid.” — Designed by WPFloor from India.

Learning To Fly

Wonderful Life

“My favorite song is ‘Wonderful Life’ from Black from my childhood. This picture that was taken in a very beautiful dock in Belgrade evokes a calm feeling from that song, a peacefulness of soul and mind. Each of us has a gift, but what is truly wonderful is to embrace a flair toward life in small things because, no need to run and hide, it’s a wonderful, Wonderful Life. Cheers!” — Designed by Marija Zaric from Belgrade, Serbia.

Wonderful Life

Purple Rain

“I love Prince and I was very sad when he left. This song is pretty romantic and makes me dream…” — Designed by Purple from India.

Purple Rain

An Autumn Night

“‘My autumn night vanishes into light, Who will I leave you with, my flute?’ The famous song written by Rabindranath Tagore, Nobel Prize winner in Literature 1913. The song is taken from his famous song collection ‘Gitabitan’.” — Designed by Suman Sil from India.

An Autumn Night

Dreadlock Rasta

“‘Buffalo Soldier’ is a nickname bestowed by the Native Americans to members of the U.S. 10th Cavalry Regiment of the United States Army, denoting their stubborn courage and toughness in battle. The song ‘Buffalo Soldier’ reflects on the courage and valour of these soldiers despite the racist, prejudicial system in which they operated.” — Designed by Sweans from London.

Dreadlock Rasta

Buena Vista Social Club

“I dance salsa and other Latin dances since 10 years. This makes me happy and makes me love life even more. This song by Chan Chan is one of the first Latin songs I’ve ever fallen in love with.” — Designed by Material Admin from India.

Buena Vista Social Club

Stairway To Heaven

“‘Stairway To Heaven’ by Led Zeppelin.” — Designed by Stellar from India.

Stairway To Heaven

Sounds Like Spring

“In spring you can hear all those beautiful sounds outside of the birds singing. Therefore I created this wallpaper of an old phonograph with lovely flowers coming out like music.” — Designed by Melissa Bogemans from Belgium.

Sounds Like Spring

Spring Wallpapers

Your favorite song wasn’t part of the collection? No worries, we’ve got some seasonal wallpapers for you to get your desktop ready for April, too, of course — no matter the weather. Please note that some of them are from our archives, and, thus, don’t come with a calendar.

Enjoy Easter

Designed by UIG Studio from Poland.

Enjoy Easter

No Winter Lasts Forever

“Here comes spring, breathing new life into the world around us.” — Designed by Norjimm Pvt Ltd from India.

No Winter Lasts Forever

Bunny

“Easter is the time to celebrate new beginnings, welcoming spring while rejoicing the festival of abundance with your loved ones and your family.” — Designed by Vipin Nayar from India.

Bunny

Brushes Are Flowers

“April is just around the corner of spring, so I added the flower, but it is also a gray month with all the rain that usually comes with it, so I added gray colors with a twist.” — Designed by Tiago Oliveira from Portugal.

Brushes Are Flowers

Earth Yey!

“April has a very special day: Earth Day! So I decided to pay tribute to this amazing planet by creating this image with a happy universe.” — Designed by Sara Andreia Agostinho from Portugal.

Earth Yey!

Strength To Face the Challenges

“April is a month that most people look back to see how far they got with the new year’s resolutions. It’s always overwhelming to realize that it’s almost half way to one year and there’s still so much to be done. This calendar wallpaper is designed to remind you that, ‘you’ve got this!’” — Designed by Metrovista from Orlando, Florida.

Strength To Face the Challenges

Happy Easter

Designed by Tazi Design from Australia.

Happy Easter

Relax!

“…and enjoy your Easter holidays with some good chocolate.” — Designed by Ricardo Gimenes from Brazil.

Relax!

Clover Field

Designed by Nathalie Ouederni from France.

Clover Field

Fairytale

“A tribute to Hans Christian Andersen. Happy Birthday!” — Designed by Roxi Nastase from Romania.

Fairytale

Springtime Sage

“Spring and fresh herbs always feel like they compliment each other. Keeping it light and fresh with this wallpaper welcomes a new season!” — Designed by Susan Chiang from the United States.

Springtime Sage

Fusion

Designed by Rio Creativo from Poland.

Fusion

Be Happy Bee

“Smell of spring flowers, especially daisies and open landscapes, the joy of freedom.” — Designed by Kiraly Tamas from Romania.

Be Happy Bee

Spring Infographics

“Spring comes for everyone, for big and for small. How spring is arranged? I suggest us to understand this question.” — Designed by Ilya Denisenko from Russia.

Spring Infographics

Flying On A Rainy Day!

“April is the month of spring or autumn depending where you live on the globe! It’s also the second rainiest month of the year. I was inspired by one simple motif to illustrate rain, birds and flowers. So either you witness rainy days or colorful ones … Enjoy April!” — Designed by Rana Kadry from Egypt.

Flying on a rainy day!

Without The Rain There Would Be No Rainbows

“I love April showers and the spring blooms they bring!” — Designed by Denise Johnson from Chicago.

Without The Rain There Would Be No Rainbows.

Good Day

“Some pretty flowers and spring time always make for a good day.” — Designed by Amalia Van Bloom from the United States.

good day

The Perpetual Circle

“The Black Forest, which is beginning right behind our office windows, so we can watch the perpetual circle of nature, when we take a look outside.” — Designed by Nils Kunath from Germany.

The perpetual circle

April Brings Spring

“With April comes spring, flowers and a fresh breathe of warmth and creativity.” — Designed by Zack Aronson from New York, US.

April X Tribeca Film Festival

Silly Sheep

Designed by Pietje Precies from The Netherlands.

Smashing Wallpaper - April 2011

Sakura

“Spring is finally here with its sweet Sakura’s flowers, which reminds me of my trip to Japan.” Designed by Laurence Vagner from France.

Smashing Wallpaper - April 2011

A Time For Reflection

“‘We’re all equal before a wave.’ – Laird Hamilton.” — Designed by Shawna Armstrong from the United States.

A Time for Reflection

Spring Rain

“Even the rain is beautiful during spring!” — Designed by Zlatina Petrova from Bulgaria.

Spring Rain

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works.

Join in next month!

Source: Smashing Magazine, A Journey Through The World Of Music (April 2018 Desktop Wallpapers)

Collective #402

dreamt up by webguru in Uncategorized | Comments Off on Collective #402



C402_template

Tabler

A well designed dashboard template with a responsive and high quality UI.

Check it out







C402_egg

Eggradients

Ready to use, trendy background gradients in the shape of eggs and with witty names 🙂

Check it out


C402_test

Unit Testing in JavaScript

A tutorial by Tania Rascia where you’ll learn how to perform unit tests on JavaScript with Mocha by developing a calculator app in Node.js.

Read it






C402_mobbin

Mobbin

Get inspiration for the latest mobile design patterns from this curated gallery.

Check it out









Collective #402 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #402

Understanding Logical Properties And Values

dreamt up by webguru in Uncategorized | Comments Off on Understanding Logical Properties And Values

Understanding Logical Properties And Values

Understanding Logical Properties And Values

Rachel Andrew



In the past, CSS has tied itself to physical dimensions and directions, physically mapping the placement of elements to the left, right and top and bottom. We float an element left or right, we use the positioning offset properties top, left, bottom and right. We set margins, padding, and borders as margin-top and padding-left. These physical properties and values make sense if you are working in a horizontal, top to bottom, left to right writing mode and direction.

They make less sense if you use a vertical writing mode, whether for your entire layout or for some elements. In this article, I’m going to explain how CSS is changing to support writing modes, and in doing so, I’ll clear up some of the things that might confuse you about Flexbox and Grid.

When I first began working with CSS Grid and explaining the new specification to people, I noted that the grid-area property could be used as a one-line shorthand for setting all four lines. Therefore, the three examples below would result in the same item placement. The first uses the longhand properties, the second specifies start and end lines for each dimension, and the third uses grid-area.

.item {
  grid-row-start: 1;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: 4;
}
.item {
  grid-row: 1 / 3;
  grid-column: 2 / 4;
}
.item {
      grid-area: 1 / 2 / 3 / 4;
}

The order of the lines when we use grid-area is as follows:

  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end

The first question I (and many people in my audiences) had was, “why don’t these follow the Top, Right, Bottom, Left order we are used to from everything else in CSS?” They actually go in the reverse order to those values: Top, Left, Bottom, Right! Is the CSS Working Group actively trying to make things difficult?

The answer is that these values have moved away from the underlying assumption that content on the web maps to the physical dimensions of the screen, with the first word of a sentence being top left of the box it is in. The order of lines in grid-area makes complete sense if you had never encountered the existing way that we set these values in a shorthand. We set the two start lines first, then the two end lines.

This means that if we change the writing mode of our document to a vertical one, the position of a block remains relative to the writing mode of the document, rather than the physical properties of the screen. You can try this in the example below, switch the writing-mode value for our layout and see the entire grid rotate.

See the Pen Grid and Writing Modes by Rachel Andrew (@rachelandrew) on CodePen.

Knowing this fact about writing modes also explains why CSS Grid and Flexbox refer to start and end lines rather than mapping the grid to the physical dimensions of top, right, bottom and left as we would use with absolute positioning. In the above example, the first item is positioned using grid-area and line-based positioning.

grid-area: 1 / 2 / 3 / 4;

If we were to use the longhand this would look like this:

grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 4;

We set both start lines, block axis first, inline axis second then follow the same pattern for the end lines in each dimension. Whichever way the grid is laid out, the start and end lines remain relative to the grid and writing mode of the document.

Block And Inline Dimensions

I have already mentioned something which is key to understanding new layout, the concept of the Block and Inline dimensions. These terms are going to keep coming up as you work with new CSS. The two dimensions are reasonably easy to understand in the context of Grid Layout as we are always working with a block and an inline axis when working in Grid Layout, so I’ll use a Grid demo to explain.

The Block dimension corresponds to the order in which blocks are laid out on the page. If you think about a paragraph of text in English. Each paragraph is laid out one below the other, the direction in which these are laid out is the block dimension, and so in Grid Layout, this is the Block Axis.

In CSS Grid Layout the Block Axis is also referred to as the Row Axis, which is why the Block Axis properties are grid-row-start and grid-row-end.


A grid with a horizontal writing mode, the block axis running top to bottom
The Block or Row Axis

The inline axis, therefore, runs across the block axis, in the direction that words lay out in a sentence. In English, that axis runs left to right. In Grid Layout, the Inline Axis is the Column Axis with the properties grid-column-start and grid-column-end.


A grid with a horizontal writing mode, the inline axis running vertically
The Inline or Column Axis

If we change the writing mode of our example to vertical-lr the writing mode is now vertical, which means that the block axis runs vertically and the inline axis along the lines (top to bottom).


A grid demonstrating how the block and inline axises switch when in vertical writing mode
The axises in a Vertical Writing Mode

So if we talk about the Block dimension, we are describing the direction in which paragraphs of text would lay out in normal document flow, the Inline dimension being the direction a sentence runs.

Logical Properties

Once you become used to working with Block and Inline dimensions, start and end lines, the link to physical dimensions in the rest of CSS begins to feel awkward. There is, however, a specification which defines logical versions of all of the existing physical properties – The CSS Logical Properties and Values specification which is a First Public Working Draft. Currently the only browser with good support for these properties is Firefox, however understanding how they work can be a good way to think about new CSS, so let us take a look.

I have illustrated each section with CodePen examples, to see these working you will need to use Firefox!

Logical Dimensions

The logical properties define a start and end property for the block and inline dimension. For height and width properties, we instead use block-size and inline-size. We can also set max-block-size, min-block-size, max-inline-size and min-inline-size. If you are working in English, a horizontal top-to-bottom language then block-size refers to the physical height of the block on your screen, inline-size the physical width of the item. If you are working in a language where the blocks run vertically, then as you look at your screen block-size will appear to control the width and inline-size the height.

You can see this in action in the demo below. My block has a block-size of 150 pixels and an inline-size of 250 pixels. Change the writing-mode property to see how the layout adjusts.

See the Pen Block and Inline Size Demo by Rachel Andrew (@rachelandrew) on CodePen.

Logical Borders

We then have properties to control borders which work in the same way. The physical properties for borders are:

  • border-top
  • border-top-size
  • border-top-style
  • border-top-color
  • border-right
  • border-right-size
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-size
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-size
  • border-left-style
  • border-left-color

These then have logical mappings which become a little verbose as longhands, but are:

  • border-block-start
  • border-block-start-size
  • border-block-start-style
  • border-block-start-color
  • border-inline-start
  • border-inline-start-size
  • border-inline-start-style
  • border-inline-start-color
  • border-block-end
  • border-block-end-size
  • border-block-end-style
  • border-block-end-color
  • border-inline-end
  • border-inline-end-size
  • border-inline-end-style
  • border-inline-end-color

In the following example, there are two blocks, the first using logical properties to set a border-block-start-color of green, and a border-inline-end-style of dotted. The second block uses the physical properties of border-top-color and border-right. Change the writing-mode to see how these behave.

See the Pen Logical Borders by Rachel Andrew (@rachelandrew) on CodePen.

Margins And Padding

Margins and padding have similar longhands to our border properties, with the physical properties being:

  • margin-top
  • margin-left
  • margin-bottom
  • margin-right
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

These have logical properties as follows:

  • margin-block-start
  • margin-inline-start
  • margin-inline-start
  • margin-inline-end
  • padding-block-start
  • padding-inline-start
  • padding-inline-start
  • padding-inline-end

In this next example, I have set padding-block-start on the first block, and padding-top on the second, change the writing mode to see the difference when the Block and Inline axises are switched.

See the Pen Logical Properties – Padding by Rachel Andrew (@rachelandrew) on CodePen.

Positioning Offsets

Another place where physical properties are used is when positioning things using the position property. After setting position: absolute or another value of position other than the default of static we then can position an item using offsets, either from the viewport or from a parent that has created a new positioning context.

The offset physical properties are:

  • top
  • right
  • bottom
  • left

Following the pattern of our other logical properties we then have:

  • offset-block-start
  • offset-inline-start
  • offset-block-end
  • offset-inline-end

Try these out in the example below. The box with a border has position: relative and the small purple square position: absolute. In the physical example the square is positioned top: 50px and right: 20px. The logical version has offset-block-start: 50px and offset-inline-end: 20px.

See the Pen Logical Offsets by Rachel Andrew (@rachelandrew) on CodePen.

Logical Values

Another place where we are accustomed to using physical dimensions is when we float or clear things. For float, clear we have some logical versions of the left and right values.

  • inline-start
  • inline-end

See the Pen Floating with Logical Values by Rachel Andrew (@rachelandrew) on CodePen.

In the demo, I am floating the purple block in the logical version inline-start. I’m also using logical properties for the margin; this ensures that the margin always comes after the block, and before the content which wraps around it. By selecting the vertical-rl value in the drop-down, you can see how in the physical example the margin ends up on the right of the block, rather than being applied in the -end direction.


Two boxes containing purple blocks, the lefthand block beig misaligned
The positioned block in the physical example on the left has a margin right

There are also start and end values for text-align. Aligning something to start will align it to the start of the inline axis, to end to the end of the inline axis, irregardless of whether the writing mode is horizontal or vertical.

Using Logical Properties And Values Today


The Can I Use website demonstrating logical properties support
The state of browser support in February 2018

As already mentioned, there is little browser support at the moment for logical properties and values. However, if you want to start working with them now, and option would be to write your CSS using them and then use a PostCSS plugin to convert the logical properties and values to their physical counterparts. This plugin by Jonathan Neal covers all of the properties and values that I have described in this article.

You can also help to encourage adoption by browser vendors of these properties by starring the Chrome bug, and upvoting these on the Edge Developer Feedback site.

Even if you decide not to use these properties now, understanding how they work is a key piece of understanding for working with a new layout. Describing your Grid or Flex layout as having start and end lines, thinking about block and inline dimensions, these things will make it much easier to understand how layout works.

Further Reading

Smashing Editorial
(il)

Source: Smashing Magazine, Understanding Logical Properties And Values

UX In Contact Forms: Essentials To Turn Leads Into Conversions

dreamt up by webguru in Uncategorized | Comments Off on UX In Contact Forms: Essentials To Turn Leads Into Conversions

Do you like filling out forms? I thought not. It’s not what we want from a service. All the user wants is to buy a ticket, book a hotel room, make a purchase and so on. Filling in a form is a necessary evil they have to deal with. Does this describe you? So, what actually affects a person’s attitude to submitting a form?
It might be time-consuming. Complicated forms are often hard to understand (or you just don’t feel like filling it in).
Source: Smashing Magazine, UX In Contact Forms: Essentials To Turn Leads Into Conversions

Building A UX Team

dreamt up by webguru in Uncategorized | Comments Off on Building A UX Team

(This is a sponsored article.) In my previous article, I explored the rise of design, in particular focusing on the emergence of design as a business driver. As the spotlight has focused on the potential of design to transform businesses, we’ve seen a growing need for designers — and related team members — across a wider range of specializations. These specializations include:
Design Researchers Creative Directors Content Strategists Copywriters Visual Designers UI Designers Marketers Of course, this list isn’t exhaustive and many designers undertake a cross-section of these roles by necessity.
Source: Smashing Magazine, Building A UX Team

How To Use Heatmaps To Track Clicks On Your WordPress Website

dreamt up by webguru in Uncategorized | Comments Off on How To Use Heatmaps To Track Clicks On Your WordPress Website

There are lots of ways to measure the performance of a web page and the most popular one is by far Google Analytics. But knowing exactly what images, words, or elements on your site catch your site visitor’s specific attention is not possible with these tools alone.

Sometimes, you simply want to know what makes your page great in terms of design, layout, content structure (you name it) and what prompts people to take one intentional action instead of another. You will be probably surprised to learn that there’s actually a solution to your question: heatmaps.

Unlike Google Analytics, which works with numbers and statistics, the heatmaps show you the exact spots that receive the most engagement on a given page. Through heatmaps, you will know what are the most clicked areas on a page, what paragraphs people select while scanning your content, and what is the scrolling behavior of your clients (e.g., how many went below the fold or how many reached the bottom of the page).

In this article, we will talk about why heatmaps are so efficient for your marketing goals and how they can be integrated with your WordPress site.

Why Use Heatmaps On Your WordPress Site

Before progressing to the “how to” part, you might want to know why it’s worth it to dedicate valuable time on implementing heatmaps for your WordPress site and what their actual role is.

First off, visual marketing is constantly growing as many more people now respond positively to a modern and user-friendly interface and skip a plain, non-interactive one. If a certain action requires too many steps and a hard to maneuver platform, they eventually give up, and you lose clients.

Of course, great content is still the key, but the way your site is structured and combines various elements will influence the activity of your visitors, which is either convert (engage) or leave.

Marketing experts researched this kind of behavior over time:

But what were heatmaps built for specifically? A heatmap can help you discover valuable and, sometimes, surprising facts about your audience.

If you add one to your WordPress site, you can:

  • Track your visitors’ clicks and become aware of their expectations while browsing through your site. This way, you can adjust your pages and make them catchier and more compelling.

  • Find out what is of interest for people. You’ll know what information they are looking for, so you can put it in the spotlight and use it to your favor.

  • Analyze the scrolling behavior. See how many visitors reached the bottom area of the site and how many left immediately without browsing further through the sections.

  • Keep an eye on the cursor movement and see what pieces of content your audience is hovering over (or selecting) in a text.


Scrolling behavior heatmap
Scrolling behavior heatmap

Again, using heatmaps is not only about tracking clicks for fun, it can have many implications for your business’ growth. They can influence purchases or conversions of any kind (it depends on what you want to achieve with your site).

You will know if your call-to-action buttons get the attention you intended, compared to other elements on the same page. Maybe other design elements you placed on your sales page distract people from clicking the buy button, and this can be seen on the hot spots map. Based on the results, you can change the way they look, their position, their styling, etc., hence sales increase.

Bloggers can also use the heatmaps because this way they will know how to create customer-friendly, appealing layouts for their content. Some layouts generate more traffic than others, and it’s up to you to find out which ones.

If people linger on a certain piece of information, it means it’s valuable for them, and you can use it to your favor by placing a link or a button nearby. Or you can simply create a separate post with even more information on that topic.

How To Add A Heatmap To Your WordPress Site

No matter if we are talking about plugins originally made for WordPress or third-party tools, the integration is not difficult at all. Usually, the most difficult part about heatmaps is the interpretation of the results — the conclusions along with the implications they have on your business and how to use them to your advantage.

When it comes to installing them, you just need to choose one tool and start the tests. Crazy Egg, Heatmap for WordPress, Hotjar Connecticator, Lucky Orange, and SeeVolution are the best and most popular tools that will help you in this direction. Heatmap for WordPress and Hotjar are free, while the other three come in premium plans (they offer free trials, though).

It’s important to mention that all these tools (except for Heatmap for WordPress) work with other website builders as well, not only WordPress. They are universal; it’s just that the WordPress developers found an easy way to integrate them with the latter so that the non-coders won’t struggle much with it. To integrate them with any other website builder, such as Squarespace for instance, you need to play with the code a little bit.

So, how to set up the heatmaps on your site? Let’s use Hotjar because it does a good job overall. It is intuitive, modern, and quick to implement in WordPress.

In this case, let’s take Hotjar Connecticator plugin as an example. After installing and activating it, you need to create an account on hotjar.com, add the URL of the site you want to monitor (you can add more sites later), and copy the provided tracking code to the plugin’s page in your WordPress dashboard (as seen below).



Now, it’s time to create the heatmap, which can be done right from the Hotjar platform (you can’t customize anything on your WordPress dashboard). So, click on Heatmaps, then New Heatmap.

Next, you need to choose your Page Targeting preferences. Do you want to track the hot spots on a single page? Do you test several pages at the same time to compare their results? That works too. If you need the latter, you have some URL formats available, so you can make sure you can target all the pages from a specific category (sorted by type, publishing date, etc.) You can even write the exact words that the links contain and Hotjar starts tracking the pages.

An interesting thing about Hotjar is that it lets you exclude page elements that you don’t want to monitor by adding their CSS selectors. This way, you can avoid being distracted by unneeded things when you compare or analyze the results and can focus only on the ones that you want to test.

After you create the heatmap, the first screenshot with the hot spots will be provided only after the page starts to get visitors and clicks, so don’t expect results right away. The tool tracks all the views you had on that page since the heatmap was created so that you can make reports based on the views and the number of clicks. This kind of reports let you know you how clickable (or not) your content is.

Here’s how the first screenshot provided by Hotjar looks (the testing was done on an uncustomized version of Hestia WordPress theme):



Another awesome thing about this tool is that it provides you the option to create simple and interactive polls to ask your users why they’re leaving your page or what were the things they didn’t enjoy about your page.

Case Study: How We Improved Landing Pages On ThemeIsle And CodeinWP With Heatmaps

The theory sounds captivating, and it’s almost always easier than the practice itself. But does this method really work? Is it efficient? Do you get pertinent results and insights at the end of the day?

The answer is: Yes, if you have patience.

We love heatmaps at ThemeIsle and use them on many of our pages. The pages are mostly related to WordPress themes since the company is an online shop that sells themes and plugins for this particular platform.

One of the most popular pieces of content from CodeinWP blog is related to themes as well. We have a large range of listings, and many of them rank in top three of Google results page. Lately, we have experimented with two types of layouts for the lists: one that has a single screenshot presenting the theme’s homepage and another providing three screenshots: homepage, single post page, and mobile display.

The main thing we noticed after comparing the two versions was that quite the same number of people reached to end of the list, but the clicks distribution was different: the listing with more visuals didn’t get as many clicks in the bottom half as the one with only one screenshot. This means that the list with more visuals is more explanatory because it offers more samples from the theme’s design, which helps people realize faster which ones are appealing to them. Given this fact, there’s no need for extra clicks to see how a theme looks.

In the one-screenshot case, people dig deeper to find more details about a theme, since there’s only the homepage that they can see from the picture. Hence, they will click more to get to the theme’s page and launch its live demo.

So, if you’re looking for advertising opportunities or you’re using affiliate links, the one-picture version will help you more in terms of user engagement and time spent on your site.





Another example of using heatmaps is Hestia theme’s documentation page. During the testing process, we noticed that a significant number of users are interested in upgrading to the premium version after seeing the number of clicks on the word “Upgrade”, which convinced us to move the upgrade button to a more obvious place and improve the destination page that contains the premium features of the theme.

Speaking of premium features, another experiment of ours was to track the cursor movement and see what are the features people are hovering over more when checking the documentation. Based on the results, we used the most popular items on many landing pages that were seeking conversion – which, in this case, was the upgrade to the premium theme by our free users.



We also created a heatmap for our FAQ page to track the less clicked questions, which we replaced subsequently with other relevant ones. The test is still in progress, as we are trying to improve our support services and offer the customers smoother experiences with our products.



The Importance Of A/B Testing

After getting great insights from the heatmaps, you don’t have to stop there. Create alternatives for your pages based on the results and use the A/B testing method to see which ones perform better.

A/B testing is probably the most popular method with which you can compare two or more versions of the same page. The end goal is to find out which one converts better. You should try it because it definitely helps you get closer to your goals and offers you a new perspective on how your content is being consumed by your audience.

So, after using heatmaps for a while and tracking the behavior of your users, start to make a plan on how to improve your site’s usability. Create alternatives, don’t stick with only one. If you have more than one idea, put them all to test and observe people’s reactions. The goal here is to create the most efficient landing page, the one that has the best chances to convert or to receive the expected engagement.

But how does A/B testing work?

Well, there are several plugins built to make this method work on your WordPress site, but Nelio A/B Testing is the most popular based on the reviews it has on WordPress.org directory (and it’s also free). After installing the plugin, you can choose the type of experiment you want to run. It has a large range of options to compare: pages, posts, headlines, widgets, and more.



Now, starting an experiment is really easy, it takes a few minutes. When you create it, you need to add the original page you want to run tests on, the alternative you want to compare it to, and the goal (what you are trying to achieve with the experiment: get page views, clicks, or direct people to an external source). After stopping the experiments, the plugin will show you detailed results that revolve around the goal you set in the first place. So, at the end of the test, you can tell which page performed better, and you can use it on your site… until a new idea comes to your mind and you should start testing again. Because digital marketing is not about assuming and hoping that things will happen, it’s about making things happen. That’s why you should always test, test, and test again.

By the way, with Nelio A/B Testing plugin, you can create heatmaps too, but they are not as sophisticated as the plugins listed earlier and don’t deliver as many insights. But you can try it out if you want to run quick experiments and need some basic information about a page.

Conclusion

If you want to have a successful business or to be the author of a bold project, keep adjusting your strategies. Try new things every day, every week. To be able to adjust, it’s not enough to simply know your audience but to also test its behavior and make the next moves based on that.

Marketing is not about guessing what your customers want; it’s about finding it yourself and offering them that one thing they need. The heatmaps method will help you along the way by sketching people’s behavior on your site and highlighting what they care most about. It’s simple, fast, visual (you don’t need to dig too much into statistics to understand your audience), and fun.

Knowing what your users’ actions are when they land on your web pages could be something truly fascinating, and you can learn a lot from it.

Smashing Editorial
(mc, ra, il)

Source: Smashing Magazine, How To Use Heatmaps To Track Clicks On Your WordPress Website