Tag Archives: friends

Thumbnail

Landing Page Essentials: A Free Video Crash Course from Unbounce and Skillshare

Ever heard the saying “Cart before the horse”? Or “You have to crawl before you can walk”? Or “You can’t put lipstick on a landing page with 27 links”?

That last one may be exclusive to landing page software employees, but the sentiment is the same. Unless the foundation of your landing page is strong, any optimization beyond that will be a waste of your time—and ad spend. Because even the slickest, fanciest landing page will leak precious conversions if it lacks certain crucial elements.

For the sake of those ad dollars, let’s go back to basics.

In collaboration with our friends (and customers!) at Skillshare, we’ve created a free video crash course on the fundamentals of a high-converting landing page. Whether you’re building your first page or just want a refresher, you’ll get a checklist to set up each of your pages for success.

The full course, Creating Dedicated Landing Pages: How to Get Better ROI for Your Marketing Spend, is hosted by Unbounce VP of Product Marketing Ryan Engley and comprised of 11 videos totalling a quick 31 minutes. Sign up for a free Skillshare account and dive right into binge mode, or keep scrolling for an overview of what every landing page you create should have.

Bonus: Skillshare is offering 2 free months and access to thousands of other marketing classes just for signing up through our course.

Who’s it for?

Anyone running marketing campaigns! But in particular, those who execute on them.

Whether you’re responsible for launching paid advertising campaigns, build and design landing pages yourself, or work with designers and copywriters to create them, this course will ensure you’ve covered every base to create a compelling and high-converting post-click experience.

In a nutshell: It’s for anyone who runs paid marketing campaigns and wants to get the most bang for their buck.

What will it teach me?

In 11 videos, Ryan will take you through the process of creating a persuasive marketing campaign, cover each step of building a successful landing page within it, and explain the “why” behind it all so you’re taught to fish instead of just being handed the fish.

A few tidbits to start

Attention Ratio

If you’re thinking, “What’s wrong with sending people to my homepage?” then Attention Ratio is a great place to start.

“Your website is a bit of a jack of all trades,” Ryan explains. “Usually it’ll have a ton of content for SEO purposes, maybe information about your team…but if you’re running a marketing campaign and you have a single call to action in mind, your website’s not going to do you any favours.”

The more links you have on your page, the more distractions there are from your campaign’s CTA. You don’t want people to explore—you want them to act. And an Attention Ratio of 1:1 is a powerful way of achieving that.

Learn more about Attention Ratio in chapter three.

Unique Selling Proposition (USP)

Somewhat self-explanatory, your Unique Selling Proposition describes the benefit you offer, how you solve for prospects’ needs, and what distinguishes you from the competition. This doesn’t all have to fit in one sentence, rather, it can reveal itself throughout the page. But if you’re going to focus on one place to do the “heavy lifting,” as Ryan calls it, this place should be your headline and subhead.

Take Skillshare’s landing page for a content marketing course by Buzzfeed’s Matt Bellassai (if his name doesn’t ring a bell, Google him, grab some popcorn, and come back to us with a few laughter-induced tears streaming down your face). Without even looking at the rest of the page, you know exactly what you’ll get out of this course and how it will help you achieve a goal.

Learn more about Unique Selling Proposition in chapter five.

Social Proof

What’s more convincing than word of mouth? Since we don’t advise stalking and hiring people’s friends to tell prospects how great you are, the next best thing is to feature testimonials on your landing page. The key here is that you’re establishing trust and credibility by having someone else back you up.

Customer quotes, case studies, and product reviews are just a few of the many ways you can inject social proof into your landing page. Think of it as a “seal of approval” woven into your story that shows prospects you deliver on the promise of your Unique Selling Proposition.

Customer testimonials serve as the proof in your pudding.

Learn more about Social Proof in chapter eight.

And now for all the bits

Watch all 11 episodes of Creating Dedicated Landing Pages: How to Get Better ROI for Your Marketing Spend to set your landing pages up for success in less time than it takes to finish your lunch break. Beyond being 100% free, it’ll save you a lot of guesswork in building landing pages that convert and precious ad spend to boot. So settle in for a mini binge watch with a sandwich on the company tab—you earned it.

View article:  

Landing Page Essentials: A Free Video Crash Course from Unbounce and Skillshare

Thumbnail

What Do You Need To Know When Converting A Flash Game Into HTML5?




What Do You Need To Know When Converting A Flash Game Into HTML5?

Tomasz Grajewski



With the rise of HTML5 usage, many companies start redoing their most popular titles to get rid of outdated Flash and match their products to the latest industry standards. This change is especially visible in the Gambling/Casino & Entertainment industries and has been happening for several years now, so a decent selection of titles has already been converted.

Unfortunately, when browsing the Internet, you can quite often stumble upon examples of a seemingly hasty job, which results in the lover quality of the final product. That’s why it’s a good idea for game developers to dedicate some of their time for getting familiar with the subject of Flash to HTML5 conversion and learning which mistakes to avoid before getting down to work.

Among the reasons for choosing JavaScript instead of Flash, apart from the obvious technical issues, is also the fact that changing your game design from SWF to JavaScript can yield a better user experience, which in turn give it a modern look. But how to do it? Do you need a dedicated JavaScript game converter to get rid of this outdated technology? Well, Flash to HTML5 conversion can be a piece of cake — here’s how to take care of it.

How To Improve HTML5 Game Experience

Converting a game to another platform is an excellent opportunity to improve it, fix its issues, and increase the audience. Below are few things that can be easily done and are worth considering:

  • Supporting mobile devices
    Converting from Flash to JavaScript allows reaching a broader audience (users of mobile devices); support for touchscreen controls usually needs to be implemented into the game, too. Luckily, both Android and iOS devices now also support WebGL, so 30 or 60 FPS rendering usually can be easily achieved. In many cases, 60 FPS won’t cause any problems, which will only improve with time, as mobile devices become more and more performant.

  • Improving performance
    When it comes to comparing ActionScript and JavaScript, the latter is faster than the first one. Other than that, converting a game is a good occasion to revisit algorithms used in game code. With JavaScript game development you can optimize them or completely strip unused code that’s left by original developers.
  • Fixing bugs and making improvements to the gameplay
    Having new developers looking into game’s source code can help to fix known bugs or discover new and very rare ones. This would make playing the game less irritating for the players, which would make them spend more time on your site and encourage to try your other games.
  • Adding web analytics
    In addition to tracking the traffic, web analytics can also be used to gather knowledge on how players behave in a game and where they get stuck during gameplay.
  • Adding localization
    This would increase the audience and is important for kids from other countries playing your game. Or maybe your game is not in English and you want to support that language?

Why Skipping HTML And CSS For In-Game UI Will Improve Game Performance

When it comes to JavaScript game development, it may be tempting to leverage HTML and CSS for in-game buttons, widgets, and other GUI elements. My advice is to be careful here. It’s counterintuitive, but actually leveraging DOM elements is less performant on complex games and this gains more significance on mobile. If you want to achieve constant 60 FPS on all platforms, then resigning from HTML and CSS may be required.

Non-interactive GUI elements, such as health bars, ammo bars, or score counters can be easily implemented in Phaser by using regular images (the Phaser.Image class), leveraging the .crop property for trimming and the Phaser.Text class for simple text labels.

Such interactive elements as buttons and checkboxes can be implemented by using the built-in Phaser.Button class. Other, more complex elements can be composed of different simple types, like groups, images, buttons and text labels.

Note: Each time you instantiate a Phaser.Text or PIXI.Text object, a new texture is created to render text onto. This additional texture breaks vertex batching, so be careful not to have too many of them.

How To Ensure That Custom Fonts Have Loaded

If you want to render text with a custom vector font (e.g. TTF or OTF), then you need to ensure that the font has already been loaded by the browser before rendering any text. Phaser v2 doesn’t provide a solution for this purpose, but another library can be used: Web Font Loader.

Assuming that you have a font file and include the Web Font Loader in your page, then below is a simple example of how to load a font:

Make a simple CSS file that will be loaded by Web Font Loader (you don’t need to include it in your HTML):

@font-face 
    // This name you will use in JS
    font-family: 'Gunplay';
    // URL to the font file, can be relative or absolute
    src: url('../fonts/gunplay.ttf') format('truetype');
    font-weight: 400;

Now define a global variable named WebFontConfig. Something as simple as this will usually suffice:

var WebFontConfig = 
   'classes': false,
   'timeout': 0,
   'active': function() 
       // The font has successfully loaded...
   ,
   'custom': 
       'families': ['Gunplay'],
       // URL to the previously mentioned CSS
       'urls': ['styles/fonts.css']
   
};

It the end, remember to put your code in the ‘active’ callback shown above. And that’s it!

How To Make It Easier For Users To Save The Game

To persistently store local data in ActionScript you would use the SharedObject class. In JavaScript, the simple replacement is localStorage API, which allows storing strings for later retrieval, surviving page reloads.

Saving data is very simple:

var progress = 15;
localStorage.setItem('myGame.progress', progress);

Note that in the above example the progress variable, which is a number, will be converted to a string.

Loading is simple too, but remember that retrieved values will be strings or null if they don’t exists.

var progress = parseInt(localStorage.getItem('myGame.progress')) || 0;

Here we’re ensuring that the return value is a number. If it doesn’t exist, then 0 will be assigned to the progress variable.

You can also store and retrieve more complex structures, for example, JSON:

var stats = 'goals': 13, 'wins': 7, 'losses': 3, 'draws': 1;
localStorage.setItem('myGame.stats', JSON.stringify(stats));
…
var stats = JSON.parse(localStorage.getItem('myGame.stats')) || {};

There are some cases when the localStorage object won’t be available. For example, when using the file:// protocol or when a page is loaded in a private window. You can use the try and catch statement to ensure your code will both continue working and use default values, what is shown in the example below:

try 
    var progress = localStorage.getItem('myGame.progress');
 catch (exception) 
    // localStorage not available, use default values

Another thing to remember is that the stored data is saved per domain, not per URL. So if there is a risk that many games are hosted on a single domain, then it’s better to use a prefix (namespace) when saving. In the example above 'myGame.' is such a prefix and you usually want to replace it with the name of the game.

Note: If your game is embedded in an iframe, then localStorage won’t persist on iOS. In this case, you would need to store data in the parent iframe instead.

How To Leverage Replacing Default Fragment Shader

When Phaser and PixiJS render your sprites, they use a simple internal fragment shader. It doesn’t have many features because it’s tailored for a speed. However, you can replace that shader for your purposes. For example, you can leverage it to inspect overdraw or support more features for rendering.

Below is an example of how to supply your own default fragment shader to Phaser v2:

function preload() 
    this.load.shader('filename.frag', 'shaders/filename.frag');


function create() 
    var renderer = this.renderer;
    var batch = renderer.spriteBatch;
    batch.defaultShader = 
        new PIXI.AbstractFilter(this.cache.getShader('filename.frag'));
    batch.setContext(renderer.gl);

Note: It’s important to remember that the default shader is used for ALL sprites as well as when rendering to a texture. Also, keep in mind that using complex shaders for all in-game sprites will greatly reduce rendering performance.

How To Change Tinting Method With A Default Shader

Custom default shader can be used to replace default tinting method in Phaser and PixiJS.

Tinting in Phaser and PixiJS works by multiplying texture pixels by a given color. Multiplication always darkens colors, which obviously is not a problem; it’s simply different from the Flash tinting. For one of our games, we needed to implement tinting similar to Flash and decided that a custom default shader could be used. Below is an example of such fragment shader:

// Specific tint variant, similar to the Flash tinting that adds
// to the color and does not multiply. A negative of a color
// must be supplied for this shader to work properly, i.e. set
// sprite.tint to 0 to turn whole sprite to white.
precision lowp float;

varying vec2 vTextureCoord;
varying vec4 vColor;

uniform sampler2D uSampler;

void main(void) 
    vec4 f = texture2D(uSampler, vTextureCoord);
    float a = clamp(vColor.a, 0.00001, 1.0);
    gl_FragColor.rgb = f.rgb * vColor.a + clamp(1.0 - vColor.rgb/a, 0.0, 1.0) * vColor.a * f.a;
    gl_FragColor.a = f.a * vColor.a;

This shader lightens pixels by adding a base color to the tint one. For this to work, you need to supply negative of the color you want. Therefore, in order to get white, you need to set:

sprite.tint = 0x000000;  // This colors the sprite to white
Sprite.tint = 0x00ffff;  // This gives red

The result in our game looks like this (notice how tanks flash white when hit):

Example of the custom default shader in game development
Custom default shader (tanks flashing white).

How To Inspect Overdraw To Detect Fill Rate Issues

Replacing default shader can also be leveraged to help with debugging. Below I’ve explained how overdraw can be detected with such a shader.

Overdrawing happens when many or all pixels on the screen are rendered multiple times. For example, many objects taking the same place and being rendered one over another. How many pixels a GPU can render per second is described as fill rate. Modern desktop GPUs have excessive fill rate for usual 2D purposes, but mobile ones are a lot slower.

There is a simple method of finding out how many times each pixel on the screen is written by replacing the default global fragment shader in PixiJS and Phaser with this one:

void main(void) 
    gl_FragColor.rgb += 1.0 / 7.0;

This shader lightens pixels that are being processed. The number 7.0 indicates how many writes are needed to turn pixel white; you can tune this number to your liking. In other words, lighter pixels on screen were written several times, and white pixels were written at least 7 times.

This shader also helps to find both “invisible” objects that for some reason are still rendered and sprites that have excessive transparent areas around that need to be stripped (GPU still needs to process transparent pixels in your textures).


Example of the Overdraw shader in action in game development


Overdraw shader in action. (Large preview)

The picture on the left shows how a player sees the game, while the one on the right displays the effect of applying the overdraw shader to the same scene.

Why Physics Engines Are Your Friends

A physics engine is a middleware that’s responsible for simulating physics bodies (usually rigid body dynamics) and their collisions. Physics engines simulate 2D or 3D spaces, but not both. A typical physics engine will provide:

  • object movement by setting velocities, accelerations, joints, and motors;
  • detecting collisions between various shape types;
  • calculating collision responses, i.e. how two objects should react when they collide.

At Merixstudio, we’re big fans of the Box2D physics engine and used it on a few occasions. There is a Phaser plugin that works well for this purpose. Box2D is also used in the Unity game engine and GameMaker Studio 2.

While a physics engine will speed-up your development, there is a price you’ll have to pay: reduced runtime performance. Detecting collisions and calculating responses is a CPU-intensive task. You may be limited to several dozen dynamic objects in a scene on mobile phones or face degraded performance, as well as reduced frame rate deep below 60 FPS.


Example of the difference in the scene of a game with and withour Phaser physics debug overlay displayed on top


Phaser’s physics debug overlay. (Large preview)

The left part of the image is a scene from a game, while the right side shows the same scene with Phaser physics debug overlay displayed on top.

How To Export Sounds From A .fla File

If you have a Flash game sound effects inside of a .fla file, then exporting them from GUI is not possible (at least not in Adobe Animate CC 2017) due to the lack of menu option serving this purpose. But there is another solution — a dedicated script that does just that:

function normalizeFilename(name) 
   // Converts a camelCase name to snake_case name
   return name.replace(/([A-Z])/g, '_$1').replace(/^_/, '').toLowerCase();


function displayPath(path) 
   // Makes the file path more readable
   return unescape(path).replace('file:///', '').replace('


fl.outputPanel.clear();

if (fl.getDocumentDOM().library.getSelectedItems().length > 0)
   // Get only selected items
   var library = fl.getDocumentDOM().library.getSelectedItems();
else
   // Get all items
   var library = fl.getDocumentDOM().library.items;

// Ask user for the export destination directory
var root = fl.browseForFolderURL('Select a folder.');
var errors = 0;

for (var i = 0; i < library.length; i++) 
   var item = library[i];
   if (item.itemType !== 'sound')
       continue;

   var path = root + '/';

   if (item.originalCompressionType === 'RAW')
       path += normalizeFilename(item.name.split('.')[0]) + '.wav';
   else
       path += normalizeFilename(item.name);

   var success = item.exportToFile(path);
   if (!success)
       errors += 1;
   fl.trace(displayPath(path) + ': ' + (success ? 'OK' : 'Error'));


fl.trace(errors + ' error(s)');

How to use the script to export sound files:

  1. Save the code above as a .jsfl file on your computer;
  2. Open a .fla file with Adobe Animate;
  3. Select ‘Commands’ → ‘Run Command’ from the top menu and select the script in the dialogue that opens;
  4. Now another dialogue file pops up for selecting export destination directory.

And done! You should now have WAV files in the specified directory. What’s left to do is convert them to, for example, MP3’s, OGG, or AAC.

How To Use MP3s In Flash To HTML5 Convertions

The good old MP3 format is back, as some patents have expired and now every browser can decode and play MP3’s. This makes development a bit easier since finally there's no need to prepare two separate audio formats. Previously you needed, for instance, OGG and AAC files, while now MP3 will suffice.

Nonetheless, there are two important things you need to remember about MP3:

  • MP3’s need to decode after loading, what can be time-consuming, especially on mobile devices. If you see a pause after all your assets have loaded, then it probably means that MP3’s being decoded;
  • gaplessly playing looped MP3’s is a little problematic. The solution is to use mp3loop, about which you can read in the article posted by Compu Phase.

So, Why Should You Convert Flash To JavaScript?

As you can see, Flash to JavaScript conversion is not impossible if you know what to do. With knowledge and skill, you can stop struggling with Flash and enjoy the smooth, entertaining games created in JavaScript. Don't try to fix Flash — get rid of it before everyone is forced to do so!

Want To Learn More?

In this article, I was focused mainly on Phaser v2. However, a newer version of Phaser is now available, and I strongly encourage you to check it out, as it introduced a plethora of fresh, cool features, such as multiple cameras, scenes, tilemaps, or Matter.js physics engine.

If you are brave enough and want to create truly remarkable things in browsers, then WebGL is the right thing to learn from the ground up. It’s a lower level of abstraction than various game-building frameworks or tools but allows to achieve greater performance and quality even if you work on 2D games or demos. Among many websites which you may find useful when learning the basics of WebGL would be WebGL Fundamentals (uses interactive demos). In addition to that, to find out more about WebGL feature adoption rates, check WebGL Stats.

Always remember that there's no such thing as too much knowledge — especially when it comes to game development!

Smashing Editorial
(rb, ra, yk, il)


Continue at source: 

What Do You Need To Know When Converting A Flash Game Into HTML5?

Finding UX Research Participants




Finding UX Research Participants

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:

Finding UX Research Participants

Adobe XD Contest: Create An App Prototype With Your City’s Best-Kept Secrets

(This article is kindly sponsored by Adobe.) Every city has its hidden spots: the best place to see the sunset, a cozy coffee shop that makes excellent espresso, or that impressive building you won’t find in any guidebook. As a visitor, you might stumble across little gems like these by chance, but, well, no one knows a city’s secrets as well as the locals, right?
Now’s your opportunity to let fellow creatives see your city through your eyes — and to put your design skills to the test at the same time.

Link: 

Adobe XD Contest: Create An App Prototype With Your City’s Best-Kept Secrets

Web Development Reading List #188: Real-World Accessibility, Flexbox Madness, And The Ephemerality Of Things We Build

CSS is an amazing tool which we constantly use but we don’t seem to honor it appropriately. Whenever I see the growing browser support of the :focus-within selector, the much wanted justify-content: space-evenly for Flexbox or how great CSS Grids already work, I feel really grateful to have such awesome tools available to work with.
And with advanced new media queries such as prefers-reduced-motion, screen and (color), or pointer, we get amazing tools to improve accessibility and usability of our websites.

Continued: 

Web Development Reading List #188: Real-World Accessibility, Flexbox Madness, And The Ephemerality Of Things We Build

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

I’m big on modular design. I’ve long been sold on dividing websites into components, not pages, and amalgamating those components dynamically into interfaces. Flexibility, efficiency and maintainability abound.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

But I don’t want my design to look like it’s made out of unrelated things. I’m making an interface, not a surrealist photomontage. As luck would have it, there is already a technology, called CSS, which is designed specifically to solve this problem. Using CSS, I can propagate styles that cross the borders of my HTML components, ensuring a consistent design with minimal effort.

The post CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends appeared first on Smashing Magazine.

See original article: 

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

React Native For Web: A Glimpse Into The Future

One of the hardest decisions to make when starting a new app is which platforms to target. A mobile app gives you more control and better performance but isn’t as universal as the web. If you’re making a mobile app, can you afford to support both iOS and Android? What about trying to build a mobile app and a responsive web app? Ultimately, the best experience for your customers is for your app to work everywhere, but the development and maintenance costs of that can be prohibitive.

Link: 

React Native For Web: A Glimpse Into The Future

9 Landing Pages That Pissed Me Off and What I’d Do to Fix Them

My commentary on marketing — and the world in general — is very polarized. I despise bad experiences. And I get pretty excited when I see exceptional ones.

Friends who know me well have probably at one time or another experienced OBE (Oli’s Bathroom Experiences).

No, not that kind.

OBE is an ongoing rant about the shitty design of bathroom sinks. Weird thing to get angry about? Perhaps. A reflection of my obsession with designing effective and delightful experiences everywhere? Most definitely.

bathroom sink
Image by Till Naujock(link) via TheStocks.

I’m a bubbly person 99% of the time. But the remaining 1% I can be ever so slightly vicious. And it often comes out when I click on Google Adwords ads and see their corresponding landing pages. And of course during my visits to public restrooms.

With that in mind, I’m going to break down some real-life landing page samples that really caught my attention — for better or for worse.

Speaking of attention, I’ll be referencing my ebook, 23 principles of Attention-Driven Design, throughout, so take heed!

1. MultiTouch

multi-touch-high-res-650
Click for full-length landing page.

Above-the-fold experience

Firstly, the headline: “Marketing simplified!”. How original. Instead of simplifying marketing, MultiTouch should focus on simplifying its messaging.

Then there’s the hero shot. Let’s see what this businessman in a suit — who’s reenacting Minority Report for us in a way that’s not at all cheesy —has to offer us. Nothing. And the screenshots? They could benefit from some captions, so I know what’s important or different.

Side note: The company is called MultiTouch — emphasis on “multi.” So why is the guy only using one finger? See what I did there?

Let’s explore what the hero shot should be doing, with a definition from the awesome Angie Schottmuller during a recent webinar all about hero shots:

hero-shot

You’ll notice there are seven qualifying qualities of an effective hero shot: relevance, context, value, emotion, support, education and persuasion. How many of those seven things does our generic business dude pull off? None. Zero. Nada. Zip.

So the next time you’re choosing your hero shot, think of an image for each of the seven qualities. That should put you on the path to a visual that has impact, purpose and benefit.

To quote Unbounce’s own Dan Levy: “Next problem please.“

Subhead fail

Onto the subhead: “Generate leads – Drive sales – Measure ROI.”

Like most subheads, this line adds a little more clarity to the context; however, at this point I still don’t know if MultiTouch offers a software product or provides a service. And that’s critical information for the fleeting visitor to your landing page.

Perhaps MultiTouch could qualify the three statements with a unique aspect of its service to add more clarity:

  • Generate higher quality leads by unique qualifier.
  • Drive higher value or more sales by unique feature.
  • Measure ROI across all channels with our describe analytics feature.

Directional cues?

Throughout the page there are these little back-to-the-top links. This is really old-school web design. People already know how to scroll, so don’t worry about helping them get back to the top of the page. Rather, worry about getting visitors back to the CTA.

If you are going to add linked directional cues, make sure they take visitors back to the form.

Call to Action

CTA screenshot

Yes, I have heard enough — so let’s assume that I have sufficient details to make a buying decision. I’d recommend moving the call to action (CTA) closer to the question, “What is marketing automation you ask?”, using a contrasting color to attract attention (orange would work brilliantly here) and giving it some affordance.

The greater the perceived affordance (the manner in which the design implies how it can be used), the simpler it is to understand the presented interface. In other words, if it looks clickable, it provides a signal to the visitor that it can be used and interacted with.

Here’s a simple diagrammatic exploration of affordance.

Button affordance

One thing to keep in mind, though, is if the button is part of a well designed form (with a container that encapsulates it), affordance is less important, since the form fields imply an interactive element at the end of the form. But when placed in the middle of a page, in the middle of crowded or messy content, strong affordance (coupled with a contrasting color) can help the button stand out and be more of a target of our attention.

Huh?

Next up we have four screenshots of… Unbounce landing page templates. How naughty!

Landing page templates

Might have to have a conversation in a dark alley with these folks.

Features screenshot

And what else do we have here? Really? Powerful features? Stop telling me that your party is awesome, and just throw an awesome party.

Wait, one more section. Check out this delightful messaging…

Landing page screenshot

“WE WILL NOT ABANDON YOU!” Stop scaring visitors away with desperation!

At this point, I’m kinda lost on how to save this page. It needs to be deleted, and started from scratch. Enough. Undo. 404 or 301 this puppy. I’m abandoning you!

2. Get Response

Above-the-fold experience

Is the fold even a thing anymore?

Regardless of your perspective on this, it’s still nice to see a well architected above-the-fold experience.

get-response-650
Click for full-length landing page.

I really like the video hero shot here. When designing a video player, there are several characteristics to consider: the container, caption, poster frame (default image seen prior to clicking play) and play button.

  • In this case, the container is a fairly standard Apple laptop which conveys the online software aspect.
  • Here there is a descriptive caption up top with a nice little directional cue. People are drawn to captions placed in close proximity to images and video, as they lie outside of the container, thus breaking the flow of its perimeter.
  • The poster frame showcases an email template and how it would look on a phone, along with a visual of the tool. It is a little busy though, and could benefit from a simpler visual or some callouts pointing to elements.
  • The play button would be a little more obvious if it used a stronger contrasting color. It’s a good idea to isolate the CTA by not using its color elsewhere. Here it’s at least reserved primarily for the interactive elements on the page, which is good for consistency.

I would like to see this page with fewer links, thereby focusing visitors’ attention only on watching the video and clicking the call to action. Specifically, let’s have a closer look at the “View Pricing Plans” link under the CTA.

In my experience, links placed beneath the CTA tend to cause a drop in conversions. Here the pricing plans link may be a hindrance, and must be verified through testing.


Anything placed in close proximity to your CTA should be A/B tested – it’s a sensitive area.
Click To Tweet


Beyond the fold

It’s a very long page, and what I like to do with long pages is to look at the scroll map data to see how far people are getting down the page. If they’re not scrolling, I’d be really interested in doing a long page versus short page test here. In fact, I’ve rebuilt this page in Unbounce to show how quickly you can come up with a new variant to test.

In this video I rebuild the Get Response landing page to create a short version fit for an A/B test.

I spent a few minutes touching up the finer details (text color and page copy) and you can see the final page here.

unbounce logo icon - light backgroundBuild Landing Pages Quickly & Easily in Unbounce Start your 30-day trial now

3. Ford Employee Pricing

This one came to me as a commercial on the radio while driving the streets of Montreal in a little Car2Go. Employee pricing for everyone — woo-hoo! You pay what we pay. Awesome, right?

ford-employee-pricing
Click for full-length landing page.

What the actual?

Let’s talk about the principle of Distraction for a second. The Attention Ratio on this page is 86:1. And nowhere on the page does it mention employee pricing. It’s making me think of bad sinks again. Ever heard of Message Match? Apparently not.

This is a classic case of selfish marketing: expecting me to hunt around the site to find the offer that was advertised.

Do better, Ford. Do better.

And then something interesting happened when I returned to the site a few hours later.

ford-website-upon-return

It seems Ford got its act together a little bit and featured the promo in question. However, it wasn’t there when I (and countless others visited), so it’s still a fail.

There are still a ton of things wrong with the page, but at least Ford’s managed to fix the Message Match problem.

You did slightly better, Ford. You did slightly better. But not when it counted.

4. Zendesk

I love Zendesk as a brand. The team does some exceptional marketing… most of the time. Take a look at the landing page below that was the destination of an AdWords ad. For starters, it’s not a landing page at all — it’s their website. That’s mistake number one. I also want to draw your attention to the order of the copy on the page.

zendesk-650
Click for full-length landing page.

Information Hierarchy

Information Hierarchy is concerned with the order in which the copy on your page is presented — both in literal terms (which comes first) and in terms of the visual dominance (what stands out most).

Here, the primary headline doesn’t tell me anything about the software: “From now on, things will be better.”

Now take a look at the subhead — it contains all of the clarity missing from the headline: “Zendesk is software for better customer service.”

If I’d read the subhead first, I’d immediately know what Zendesk does. I call my solution to this phenomenon The Headline Flip.

Go look at your own landing pages and flip the headline and subhead. Does it add clarity? If so, consider reworking the order or just change the headline entirely to give it more substance.

Then run a five-second test on Usabilityhub.com and ask the question, “What does this product/service do?” to see if you have increased the page’s clarity.

5. KeyShot 5

Remember when I talked about Information Hierarchy? Well, I’m not quite done. Check out the landing page below.

Where’s the logo? Where’s the name of the product? Where’s any form of indication as to what’s going on? I have to get beneath the hero shot and the form before I even get a sense of what I’m looking at.

keyshot-5-650
Click for full-length landing page.

The hero shot is beautiful, but at first glance doesn’t tell me that this page is for rendering software. The keyword I used to get to the page was “animation software,” which provides some context. But still, I wonder if an image or video of the software itself would demonstrate much stronger context of use.

Form(ula)

The form doesn’t do much to clarify the offer, either. Form-first design is when you design your form as if it’s the only thing on the page, allowing it to communicate exactly what will happen when you interact with it.

Here the CTA says “Download,” but it could be way more specific. Rewording the CTA to say, “Download 15-Day Free Trial,” for example, would again help qualify the product as digital software.

Still on the topic of the form: inline field labels suck! They’re a usability – and hence conversion – nightmare.

The reason being that once you click in the field or start typing, the label disappears. You might think this isn’t a big deal, and that people will remember what the label said. Not true. People forget, then they click outside the form so the label shows up again before repeating the exercise.

This is especially problematic on mobile since you often can’t find any space outside the form to click to reset the label. You can click another field, but then you might want to fill in that one — but wait, you can’t see the label.

I will, however, give KeyShot bonus points for using field labels that stay in place when you click the field — disappearing only when you start typing. This is not a bad experience for the most part. And on mobile, there’s a good amount of whitespace around the form to allow scrolling past the form if you want to keep exploring. Now, with all that said, there are a few exceptions to avoiding inline field labels:

  • When there’s only one field, because it’s easy enough to remember that you just need to type in your email address
  • When the label remains static but faded in the background, instead of disappearing when typing commences

Cognitive overloading

Cognitive load describes the build-up of mental fatigue when going through a bad experience. Each complex or confusing aspect of the page adds to this load and impedes our decision-making ability, and ultimately the desire to continue.

With this in mind, let’s take a look at the fifth form field. The label is a non-question that’s formulated as a question. “Modeling software?” WTF? Are you asking me whether I think this is modeling software? If you recall my initial reaction above, I didn’t know that the page was for modeling software. This is a stress point, guaranteed to make someone stop and think.

Finally, at the end is a captcha — those evil little buggers that ask you to interpret the squiggly words and type them into a box. If you’re going to include a captcha, at least add some instruction so visitors know what to do.

Subhead woes

yay-business

Further down the page, take a look at the subheads. This is a classic example of “Yay Business” copywriting.

Read them out loud: Easy! Powerful! Fast! Integrated! Accurate! Large data sets!

Gross.

Subheads should convey benefits, which KeyShot hasn’t done. Adding qualifiers to each subhead would add significant value. But that’s enough for this page.

6. RoomKey

Assumptions

A big reason for a lack of clarity on landing pages is assuming your visitors understand your acronyms and jargon. In this case, it’s PMS, which obviously has a more widely understood meaning.

roomkey-650
Click for full-length landing page.

Perhaps the target market is 100% familiar with the term, but I’d be making an assumption, too, if I thought that.

Check out the headline: “Quick implementation of what & training in what with RoomKeyPMS”.

When you look at it like that, you can see there are holes in the headline and its ability to clearly state the page’s purpose.

I’m really struggling to see what the hero shot is trying to convey here, too, apart from the weird cloud computing reference.

To better showcase the app, I’d suggest using a video or an animated GIF — a popular design trend sweeping through the landing page world — or a simple screen capture video set to autoplay. It quickly demonstrates aspects of the interface in a more compelling way, and allows you to showcase an important feature. Check out the short Wistia video we use on the Unbounce homepage (below the image of the dude).

Scannable testimonials

It’s dangerous (not shark-infested-custard dangerous, but still) to assume that people will read your entire page, but if you have good social proof, you want to encourage people to read it.

A rule I like to go by for any big block of text is that if you can’t find an excellent sentence or phrase to highlight, then you have shitty copy.

For a testimonial, you want to break up the text with a bolded statement, and, similarly, if you can’t find one that’s compelling, your testimonial isn’t going to do its job. Try to find that gold nugget that explains the pain relief, benefit or game/life changer and bold it to break up the text.

In this case the testimonial is generic business rhetoric that has almost zero worth. I’d source another, or reach out to the customer again to uncover that gold.

7. Qlik

I really like the value proposition here, primarily because business analytics is a complex and frustrating realm. Qlik claims the software is simple and intuitive — let’s see if we can say the same for the landing page.

qlik-650
Click for full-length landing page.

Overall, I’m a fan of the design, but I can’t help feel that the most important part of the hero shot (the screenshot of the software) has been relegated to being secondary. The two tins are so big — for no rational reason — that the screenshot is too small to read. I’d suggest bumping the size of the hero shot by about 50% and making the surrounding elements smaller.

The most benefit-laden sentence in the opening paragraph is, “Discover more insights from your data in just five minutes.” I’d recommend bolding this and putting it on a line of its own to make sure people see it. It might even make sense to put it in the headline/subhead, or as a caption to the hero shot. Doing so connects the software directly to it’s benefit.

Also, in one of the bullets “analyzing multiple data sources” is referenced — some specificity would be good here. What kinds of sources can I integrate with the software? Will it pull from Google Analytics, AdWords?

Form-First

For the form, I notice a wasted opportunity to include an important subhead that highlights another strong benefit, in case the visitor’s gaze is drawn immediately to the form area, like the example opposite.

8. Adobe

Seriously? You want me to read all of that copy? It looks like a legal document.

adobe-ad-lens-650
Click for full-length landing page.

The design of a landing page will often affect how people perceive the content that’s being given away. If this datasheet is anything like the landing page, it’ll be dull as sh*t.

The only time you’re told what you’re going to get by interacting with this page is that small bold line of copy at the bottom of the left column. It’s a datasheet. What’s a datasheet? Is it industry data? Is it just a list of technical specs about the software?

Give me some bullets that tell me what I’ll learn and why I should care. Add some bolding to the large paragraphs of text, and maybe give me a preview of what’s in the datasheet: a few key highlights and how they will impact my business.

To be frank, the page is a bit cold and corporate.

To quote Unbounce Office Manager Charm Singh: “BORRRRRRRRING!”

In fact, I’m so bored with this page that I’m going to rebuild it in Unbounce to see if I can break apart the content a bit, and put more emphasis on the datasheet part.

In this video I rebuild the Adobe AdLens landing page in just 10 minutes, and make some improvements at the same time.
unbounce logo icon - light backgroundBuild Landing Pages Quickly & Easily in Unbounce Start your 30-day trial now

9. Avalaunch Media

avalaunch-650
Click for full-length landing page.

Readability issues

Readability is an important part of clarity, and the headline is cut off in a way that makes it difficult to parse. I’d consider moving the line break from

“GET A FREE $1,250 PAY
PER CLICK AUDIT…”

to

“GET A FREE $1,250
PAY PER CLICK AUDIT…”

Now each line can stand alone and still make sense. The intro paragraph also suffers from readability issues. The type is so skinny that it looks sketchy on top of the background image.

If you have to squint to read, you probably won’t bother.

Looking at the form, I’m not sure what the process will be to get my free audit. Does Avalaunch do the audit and email it to me? Will it be a consultation over the phone? It’s important to establish a sense of expectation so the visitor isn’t left wondering what’s going to happen. I’d suggest placing this information beneath the CTA or, perhaps even better, above the first form field so the expectation is set before visitors start entering (or not entering) their info.

Next up, the subheads. You’re probably noticing a common thread on a lot of these pages: the subheads are completely throwaway and meaningless to the scanning eye. Let’s run through them:

A simple exercise for better copywriting

Write down all of your landing page copy in a document and make sure every single word is congruent (aligned) with your campaign goal. Start with a skeleton outline so you have the main headline and a series of subheads. When the outline tells a coherent story, move on to filling in the story with the details of your campaign.

Testimonials need meat

The first testimonial on this page is really bad. The customer wanted an increase in search traffic. How much did Avalaunch increase it by? What did Avalaunch do to achieve this?

For the second testimonial, how did Avalaunch help its client achieve their goals? The more specific (without giving away your secrets) the better.

Wrapping up

Phewf. That was a lot of ranting. But hopefully with enough juicy fixes and recommendations that are transferable to your own marketing efforts.

For even more juicy tips and tricks, I’d highly recommend downloading my latest ebook, The 23 Principles of Attention Driven Design, where I explain how to combine data and design to create more persuasive landing pages. It will help you to establish a common language with the designers and marketers on your team, which leads to better design decisions and more enjoyable discussions around conversion.

Originally from: 

9 Landing Pages That Pissed Me Off and What I’d Do to Fix Them

Thumbnail

Web Development Reading List #114: Black Friday, UI Stack, Accessible Web Apps


“Black Friday” has many explanations and various historical reasons. Besides that, every year it leads to people buying things just because retailers give huge discounts. But do you really need more? If you wouldn’t have bought something at its full price, you probably don’t need it at all.

The User Interface Stack

In a world where most of us have many things in their home untouched for months or years, we should focus on what is important. It’s not having the newest products, using the latest tools, using the latest cool startup service. It’s about helping other people, sharing real experiences and stories with your friends. Thank them and yourself this year without a bought gift.

The post Web Development Reading List #114: Black Friday, UI Stack, Accessible Web Apps appeared first on Smashing Magazine.

Taken from:  

Web Development Reading List #114: Black Friday, UI Stack, Accessible Web Apps

Thumbnail

Why No One is Reading Your Emails on Mobile

keanu-email-featured
Optimize your emails and help Keanu turn that frown upside down!

Did you know that almost 66% of all emails are now opened on a mobile device? A statistic all marketers should be aware of, no doubt, but what should really grab your attention is that 75% of people who receive email that isn’t optimized for mobile will just delete it.

If you’re a marketer who is sending emails that haven’t been optimized for mobile, you’re missing out on so much of the action that you might as well choose another profession.

The good news is that there are solutions to your mobile woes, none of which require you to be a rocket surgeon. Just a little bit of data mixed with a little bit of design with a dash of common sense thrown in for good measure.

Here are four reasons your emails might not be getting opened and read on mobile – and what you can do to correct it.

1. You’re not teasing the content of the email

The crucial first step of any marketing email is getting people to open it. In most mobile email apps you have three lines to convince your audience to open and read that email: the subject line, the first line and the from line.

image-subject-line-image

Our friend Aaron Orendorff has written a handy guide that breaks down the importance of these three fields and how to get the most out of them. Here’s what he says, in a nutshell.

Subject lines

An ellipsis can’t tell anyone what you really mean, so before your subject lines start trailing off into a mess of meaningless dots, remember that you have just 20-30 characters to reach your mobile readers.

That actually works out quite well, as 28-39 character subject lines get the highest click rates.

With so few words at your disposal, you may wonder which ones will do the best job of reaching your future readers. Aaron breaks that down as well, with a little help from the good folks over at Retention Science:

  • Personal words like “you” and “I” work well, as do slang terms and colloquialisms. Even emoticons are starting to help open rates here at Unbounce, however slightly. The point is that your email should sound like it’s coming from a human.
  • Emotional words that give your audience some sort of attachment to your value proposition are super good.
  • In one study, using pop culture references saw an open rate of 26% over ones with traditional subject lines, which were opened only 16% of the time.

But don’t get carried away. You still have to make sure that you’re matching your subject line with the copy on your landing page. “You can learn to dance like Beyonce!” might fit the criteria above, but if you’re selling car parts, you probably won’t get too far.

Mobile email message match
Make it your own. Image credit: vi.wikipedia.org

First lines

The best kind of marketing is sincere and personal. According to Aaron:

The first line of your automated emails should read as much like the first line of a real email as possible.

Unbounce co-founder Oli Gardner often does this in his emails to prospects. A couple of examples of first lines from Oli:

CRO Day was one of the proudest moments of my professional career.

Hard to believe, but Page Fights is one year old!

They read much like an email that you’d get from a friend, which prospects are more likely to open.

From lines

Automated emails should come from a real person and not look like they’re coming from an automated system.

Again, Aaron sums it up perfectly:

Avoid from lines like support@yoursite.com, customerservice@yoursite.com, sale@yoursite.com, or, worst of all, the dreaded word auto.

Instead of sending the email from your company as a whole, send it from a specific person with a face and a name.

This article from Crazy Egg reveals some numbers behind personalized From lines. According to one study, personalized emails had a 29% higher open rate and 41% unique click-through rate.


Personalized emails can receive 29% higher open rates and 41% unique CTR!
Click To Tweet


As a marketer who is trying to get email content opened, read and acted on, adding a personal touch is a simple way of getting your audience to open your emails and click through to the next stage.

2. Your font size is creating friction

You work hard on the content of your emails, and so you want to make sure people are actually able to read them.

I subscribed to The Economist the other day. Their content is great, their delivery through their apps is spot on, but this email that I got after I signed up was a prime example of what not to do.

mobile-email-fail

What is that, an email for ants? Here’s a better job from our friends at Inbound.org.

inbound-email

Well, that’s much easier to read! The text is much larger and doesn’t require a microscope or any pinching or zooming.

So, how do you make sure that your text is readable on any given device?

While the iPhone automatically resizes tiny text, other devices won’t – so you want your font to be legible by default.

This comprehensive article on the Salesforce Canada blog recommends a minimum font size of 14 pixels for text in the body of the email, with minimum 22 pixels for headers.

But you’ve really got to test yourself to find that sweet spot for your audience.


If no one can read the tiny font in your mobile emails, you’re better off not sending them.
Click To Tweet


3. The design of your emails is getting in the way

Good email design is all about enabling readers to actually see your content.

As my colleague Brad puts it: “Get out of my way so I can read the damn email.”

This isn’t a statistical analysis, but it does speak to the heart of what we’re trying to get at: the best designs are the ones where the people reading the mobile emails are not aware of the design.

If you include images in your emails to mobile readers, there’s a good chance they won’t even be seen. As Rose Barrett at Storyports points out, 43% of Gmail users read email without turning the image display on. Some mobile email clients, like the Blackberry and Windows phone clients, block images by default.

Mobile-Email-Client-Image-Blocks
Image credit: Storyports.com

The way around this, according to Barrett, is to use HTML emails instead of text emails with images added. You’ll still get to send highly stylized and informative text to your readers, and because CTA buttons are separate from the images, they’ll still appear in your email.

And if you do decide to use images, don’t forget to keep the design consistent between your email and your landing page. Good design match never hurts conversions.

The key is to keep it simple. And don’t forget to test. What works for one audience may not work for yours, so make sure you’re testing all the things!

4. Your call to action isn’t very touching

By now you get that there is limited space on a mobile device, and the real estate that you do have is valuable. The point of your email is to get people to click a link that takes them to your awesome landing page.

Give your email readers the ability to click that link by making your call to action button big enough for them to see, and big enough for them to actually be able to tap it with their thumbs.

You want to avoid text links as CTAs in your mobile emails. Remember, your mobile audience is all thumbs (badoom pssh), and you can reduce friction by making your CTA big and beautiful.

Below is another email from Oli that shows this in action. The CTA button is large enough to see and large enough to actually tap.

Mobile email cta

Make your CTA buttons in mobile emails big enough so readers will want to tap that.
Click To Tweet


Chris Hexton at Optimizely does a great job of breaking down the art of the email CTA. The goal here is not so different from that of your landing page: make your CTA stand out.

Chris is fond of using the CRAFT method of CTA design. That means making your CTAs:

  • Colorful: Make them stand out from the rest of the text
  • Relevant: Keep CTAs in line with the message in the email
  • Actionable: Keep it clear, direct and understandable
  • Forceful: Tell your readers what to do
  • Targeted: Speak to what your readers’ needs and aspirations

By doing so, you give your readers a reason to take action and convert.

Mobile is not going anywhere

Take the time to get to know them by going through your email analytics to see how many are interacting with your emails via mobile. Dig in deep and see what you can learn about them. Offer them great experiences whether they’re on mobile or desktop by making sure that both your emails and your landing pages are mobile responsive.

Not adjusting to the needs of your mobile customer means that you’re leaving money on the table. And we’d hate to see you do that.

As always, we’d love to hear from you. Are you seeing a lift in your conversions by making use of any of these tactics? Let us know in the comments below!


View the original here – 

Why No One is Reading Your Emails on Mobile