Tag Archives: machine

Best Practices With CSS Grid Layout




Best Practices With CSS Grid Layout

Rachel Andrew



An increasingly common question — now that people are using CSS Grid Layout in production — seems to be “What are the best practices?” The short answer to this question is to use the layout method as defined in the specification. The particular parts of the spec you choose to use, and indeed how you combine Grid with other layout methods such as Flexbox, is down to what works for the patterns you are trying to build and how you and your team want to work.

Looking deeper, I think perhaps this request for “best practices” perhaps indicates a lack of confidence in using a layout method that is very different from what came before. Perhaps a concern that we are using Grid for things it wasn’t designed for, or not using Grid when we should be. Maybe it comes down to worries about supporting older browsers, or in how Grid fits into our development workflow.

In this article, I’m going to try and cover some of the things that either could be described as best practices, and some things that you probably don’t need to worry about.

The Survey

To help inform this article, I wanted to find out how other people were using Grid Layout in production, what were the challenges they faced, what did they really enjoy about it? Were there common questions, problems or methods being used. To find out, I put together a quick survey, asking questions about how people were using Grid Layout, and in particular, what they most liked and what they found challenging.

In the article that follows, I’ll be referencing and directly quoting some of those responses. I’ll also be linking to lots of other resources, where you can find out more about the techniques described. As it turned out, there was far more than one article worth of interesting things to unpack in the survey responses. I’ll address some of the other things that came up in a future post.

Accessibility

If there is any part of the Grid specification that you need to take care when using, it is when using anything that could cause content re-ordering:

“Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.”

Grid Specification: Re-ordering and Accessibility

This is not unique to Grid, however, the ability to rearrange content so easily in two dimensions makes it a bigger problem for Grid. However, if using any method that allows content re-ordering — be that Grid, Flexbox or even absolute positioning — you need to take care not to disconnect the visual experience from how the content is structured in the document. Screen readers (and people navigating around the document using a keyboard only) are going to be following the order of items in the source.

The places where you need to be particularly careful are when using flex-direction to reverse the order in Flexbox; the order property in Flexbox or Grid; any placement of Grid items using any method, if it moves items out of the logical order in the document; and using the dense packing mode of grid-auto-flow.

For more information on this issue, see the following resources:

Which Grid Layout Methods Should I Use?

”With so much choice in Grid, it was a challenge to stick to a consistent way of writing it (e.g. naming grid lines or not, defining grid-template-areas, fallbacks, media queries) so that it would be maintainable by the whole team.”

Michelle Barker working on wbsl.com

When you first take a look at Grid, it might seem overwhelming with so many different ways of creating a layout. Ultimately, however, it all comes down to things being positioned from one line of the grid to another. You have choices based on the of layout you are trying to achieve, as well as what works well for your team and the site you are building.

There is no right or wrong way. Below, I will pick up on some of the common themes of confusion. I’ve also already covered many other potential areas of confusion in a previous article “Grid Gotchas and Stumbling Blocks.”

Should I Use An Implicit Or Explicit Grid?

The grid you define with grid-template-columns and grid-template-rows is known as the Explicit Grid. The Explicit Grid enables the naming of lines on the Grid and also gives you the ability to target the end line of the grid with -1. You’ll choose an Explicit Grid to do either of these things and in general when you have a layout all designed and know exactly where your grid lines should go and the size of the tracks.

I use the Implicit Grid most often for row tracks. I want to define the columns but then rows will just be auto-sized and grow to contain the content. You can control the Implicit Grid to some extent with grid-auto-columns and grid-auto-rows, however, you have less control than if you are defining everything.

You need to decide whether you know exactly how much content you have and therefore the number of rows and columns — in which case you can create an Explicit Grid. If you do not know how much content you have, but simply want rows or columns created to hold whatever there is, you will use the Implicit Grid.

Nevertheless, it’s possible to combine the two. In the below CSS, I have defined three columns in the Explicit Grid and three rows, so the first three rows of content will be the following:

  • A track of at least 200px in height, but expanding to take content taller,
  • A track fixed at 400px in height,
  • A track of at least 300px in height (but expands).

Any further content will go into a row created in the Implicit Grid, and I am using the grid-auto-rows property to make those tracks at least 300px tall, expanding to auto.

.grid   
  display: grid;  
  grid-template-columns: 1fr 3fr 1fr;  
  grid-template-rows: minmax(200px auto) 400px minmax(300px, auto);  
  grid-auto-rows: minmax(300px, auto);  
  grid-gap: 20px;  

A Flexible Grid With A Flexible Number Of Columns

By using Repeat Notation, autofill, and minmax you can create a pattern of as many tracks as will fit into a container, thus removing the need for Media Queries to some extent. This technique can be found in this video tutorial, and also demonstrated along with similar ideas in my recent article “Using Media Queries For Responsive Design In 2018.”

Choose this technique when you are happy for content to drop below earlier content when there is less space, and are happy to allow a lot of flexibility in sizing. You have specifically asked for your columns to display with a minimum size, and to auto fill.

There were a few comments in the survey that made me wonder if people were choosing this method when they really wanted a grid with a fixed number of columns. If you are ending up with an unpredictable number of columns at certain breakpoints, you might be better to set the number of columns — and redefine it with media queries as needed — rather than using auto-fill or auto-fit.

Which Method Of Track Sizing Should I Use?

I described track sizing in detail in my article “How Big Is That Box? Understanding Sizing In Grid Layout,” however, I often get questions as to which method of track sizing to use. Particularly, I get asked about the difference between percentage sizing and the fr unit.

If you simply use the fr unit as specced, then it differs from using a percentage because it distributes available space. If you place a larger item into a track then the way the fr until will work is to allow that track to take up more space and distribute what is left over.

.grid 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;


A three column layout, the first column is wider


The first column is wider as Grid has assigned it more space.

To cause the fr unit to distribute all of the space in the grid container you need to give it a minimum size of 0 using minmax().

.grid 
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    grid-gap: 20px;

three equal columns with the first overflowing


Forcing a 0 minimum may cause overflows

So you can choose to use fr in either of these scenarios: ones where you do want space distribution from a basis of auto (the default behavior), and those where you want equal distribution. I would typically use the fr unit as it then works out the sizing for you, and enables the use of fixed width tracks or gaps. The only time I use a percentage instead is when I am adding grid components to an existing layout that uses other layout methods too. If I want my grid components to line up with a float- or flex-based layout which is using percentages, using them in my grid layout means everything uses the same sizing method.

Auto-Place Items Or Set Their Position?

You will often find that you only need to place one or two items in your layout, and the rest fall into place based on content order. In fact, this is a really good test that you haven’t disconnected the source and visual display. If things pretty much drop into position based on auto-placement, then they are probably in a good order.

Once I have decided where everything goes, however, I do tend to assign a position to everything. This means that I don’t end up with strange things happening if someone adds something to the document and grid auto-places it somewhere unexpected, thus throwing out the layout. If everything is placed, Grid will put that item into the next available empty grid cell. That might not be exactly where you want it, but sat down at the end of your layout is probably better than popping into the middle and pushing other things around.

Which Positioning Method To Use?

When working with Grid Layout, ultimately everything comes down to placing items from one line to another. Everything else is essentially a helper for that.

Decide with your team if you want to name lines, use Grid Template Areas, or if you are going to use a combination of different types of layout. I find that I like to use Grid Template Areas for small components in particular. However, there is no right or wrong. Work out what is best for you.

Grid In Combination With Other Layout Mechanisms

Remember that Grid Layout isn’t the one true layout method to rule them all, it’s designed for a certain type of layout — namely two-dimensional layout. Other layout methods still exist and you should consider each pattern and what suits it best.

I think this is actually quite hard for those of us used to hacking around with layout methods to make them do something they were not really designed for. It is a really good time to take a step back, look at the layout methods for the tasks they were designed for, and remember to use them for those tasks.

In particular, no matter how often I write about Grid versus Flexbox, I will be asked which one people should use. There are many patterns where either layout method makes perfect sense and it really is up to you. No-one is going to shout at you for selecting Flexbox over Grid, or Grid over Flexbox.

In my own work, I tend to use Flexbox for components where I want the natural size of items to strongly control their layout, essentially pushing the other items around. I also often use Flexbox because I want alignment, given that the Box Alignment properties are only available to use in Flexbox and Grid. I might have a Flex container with one child item, in order that I can align that child.

A sign that perhaps Flexbox isn’t the layout method I should choose is when I start adding percentage widths to flex items and setting flex-grow to 0. The reason to add percentage widths to flex items is often because I’m trying to line them up in two dimensions (lining things up in two dimensions is exactly what Grid is for). However, try both, and see which seems to suit the content or design pattern best. You are unlikely to be causing any problems by doing so.

Nesting Grid And Flex Items

This also comes up a lot, and there is absolutely no problem with making a Grid Item also a Grid Container, thus nesting one grid inside another. You can do the same with Flexbox, making a Flex Item and Flex Container. You can also make a Grid Item and Flex Container or a Flex Item a Grid Container — none of these things are a problem!

What we can’t currently do is nest one grid inside another and have the nested grid use the grid tracks defined on the overall parent. This would be very useful and is what the subgrid proposals in Level 2 of the Grid Specification hope to solve. A nested grid currently becomes a new grid so you would need to be careful with sizing to ensure it aligns with any parent tracks.

You Can Have Many Grids On One Page

A comment popped up a few times in the survey which surprised me, there seems to be an idea that a grid should be confined to the main layout, and that many grids on one page were perhaps not a good thing. You can have as many grids as you like! Use grid for big things and small things, if it makes sense laid out as a grid then use Grid.

Fallbacks And Supporting Older Browsers

“Grid used in conjunction with @supports has enabled us to better control the number of layout variations we can expect to see. It has also worked really well with our progressive enhancement approach meaning we can reward those with modern browsers without preventing access to content to those not using the latest technology.”

Joe Lambert working on rareloop.com

In the survey, many people mentioned older browsers, however, there was a reasonably equal split between those who felt that supporting older browsers was hard and those who felt it was easy due to Feature Queries and the fact that Grid overrides other layout methods. I’ve written at length about the mechanics of creating these fallbacks in “Using CSS Grid: Supporting Browsers Without Grid.”

In general, modern browsers are far more interoperable than their earlier counterparts. We tend to see far fewer actual “browser bugs” and if you use HTML and CSS correctly, then you will generally find that what you see in one browser is the same as in another.

We do, of course, have situations in which one browser has not yet shipped support for a certain specification, or some parts of a specification. With Grid, we have been very fortunate in that browsers shipped Grid Layout in a very complete and interoperable way within a short time of each other. Therefore, our considerations for testing tend to be to need to test browsers with Grid and without Grid. You may also have chosen to use the -ms prefixed version in IE10 and IE11, which would then require testing as a third type of browser.

Browsers which support modern Grid Layout (not the IE version) also support Feature Queries. This means that you can test for Grid support before using it.

Testing Browsers That Don’t Support Grid

When using fallbacks for browsers without support for Grid Layout (or using the -ms prefixed version for IE10 and 11), you will want to test how those browsers render Grid Layout. To do this, you need a way to view your site in an example browser.

I would not take the approach of breaking your Feature Query by checking for support of something nonsensical, or misspelling the value grid. This approach will only work if your stylesheet is incredibly simple, and you have put absolutely everything to do with your Grid Layout inside the Feature Queries. This is a very fragile and time-consuming way to work, especially if you are extensively using Grid. In addition, an older browser will not just lack support for Grid Layout, there will be other CSS properties unsupported too. If you are looking for “best practice” then setting yourself up so you are in a good position to test your work is high up there!

There are a couple of straightforward ways to set yourself up with a proper method of testing your fallbacks. The easiest method — if you have a reasonably fast internet connection and don’t mind paying a subscription fee — is to use a service such as BrowserStack. This is a service that enables viewing of websites (even those in development on your computer) on a whole host of real browsers. BrowserStack does offer free accounts for open-source projects.


Screenshot of the download page


You can download Virtual Machines for testing from Microsoft.

To test locally, my suggestion would be to use a Virtual Machine with your target browser installed. Microsoft offers free Virtual Machine downloads with versions of IE back to IE8, and also Edge. You can also install onto the VM an older version of a browser with no Grid support at all. For example by getting a copy of Firefox 51 or below. After installing your elderly Firefox, be sure to turn off automatic updates as explained here as otherwise it will quietly update itself!

You can then test your site in IE11 and in non-supporting Firefox on one VM (a far less fragile solution than misspelling values). Getting set up might take you an hour or so, but you’ll then be in a really good place to test your fallbacks.

Unlearning Old Habits

“It was my first time to use Grid Layout, so there were a lot of concepts to learn and properties understand. Conceptually, I found the most difficult thing to unlearn all the stuff I had done for years, like clearing floats and packing everything in container divs.”

Hidde working on hiddedevries.nl/en

Many of the people responding to the survey mentioned the need to unlearn old habits and how learning Layout would be easier for people completely new to CSS. I tend to agree. When teaching people in person complete beginners have little problem using Grid while experienced developers try hard to return grid to a one-dimensional layout method. I’ve seen attempts at “grid systems” using CSS Grid which add back in the row wrappers needed for a float or flex-based grid.

Don’t be afraid to try out new techniques. If you have the ability to test in a few browsers and remain mindful of potential issues of accessibility, you really can’t go too far wrong. And, if you find a great way to create a certain pattern, let everyone else know about it. We are all new to using Grid in production, so there is certainly plenty to discover and share.

“Grid Layout is the most exciting CSS development since media queries. It’s been so well thought through for real-world developer needs and is an absolute joy to use in production – for designers and developers alike.”

Trys Mudford working on trysmudford.com

To wrap up, here is a very short list of current best practices! If you have discovered things that do or don’t work well in your own situation, add them to the comments.

  1. Be very aware of the possibility of content re-ordering. Check that you have not disconnected the visual display from the document order.
  2. Test using real target browsers with a local or remote Virtual Machine.
  3. Don’t forget that older layout methods are still valid and useful. Try different ways to achieve patterns. Don’t be hung up on having to use Grid.
  4. Know that as an experienced front-end developer you are likely to have a whole set of preconceptions about how layout works. Try to look at these new methods anew rather than forcing them back into old patterns.
  5. Keep trying things out. We’re all new to this. Test your work and share what you discover.
Smashing Editorial
(il)


From:

Best Practices With CSS Grid Layout

The Rise Of Intelligent Conversational UI




The Rise Of Intelligent Conversational UI

Burke Holland



For a long time, we’ve thought of interfaces strictly in a visual sense: buttons, dropdown lists, sliders, carousels (please no more carousels). But now we are staring into a future composed not just of visual interfaces, but of conversational ones as well. Microsoft alone reports that three thousand new bots are built every week on their bot framework. Every. Week.

The importance of Conversational UI cannot be understated, even if some of us wish it wasn’t happening.

The most important advancement in Conversational UI has been Natural Language Processing (NLP). This is the field of computing that deals not with deciphering the exact words that a user said, but with parsing out of it their actual intent. If the bot is the interface, NLP is the brain. In this article, we’re going to take a look at why NLP is so important, and how you (yes, you!) can build your own.

Speech Recognition vs. NLP

Most people will be familiar with Amazon Echo, Cortana, Siri or Google Home, all of which have an interface that is primarily conversational. They are also all using NLP.




Large preview

Aside from these intelligent assistants, most Conversational UIs have nothing to do with voice at all. They are text driven. These are the bots we chat with in Slack, Facebook Messenger or over SMS. They deliver high quality gifs in our chats, watch our build processes and even manage our pull requests.




Large preview

Conversational UIs built on text are nice because there is no speech recognition component. The text is already parsed.

When it comes to a verbal interaction, the fundamental problem is not recognizing the speech. We’ve mostly got that one down.

OK, so maybe it’s not perfect. I still get voicemails every day like a game of Mad Libs that I never asked to play. iOS just sticks a blank line in whenever they don’t know what exactly was said.




Large preview

Google, on the other hand, just tries to guess. Like this one from my father. I have absolutely no idea what this message is actually trying to say other than “Be Safe” which honestly sounds like my mom, and not my dad. I have a hard time believing he ever said that. I don’t trust the computer.




Large preview

I’m picking on voice mail transcriptions here, which might be the hardest speech recognition to do given how degraded the audio quality is.

Nevertheless, speech recognition is largely a solved problem. It’s even built right into Chrome and it works remarkably well.




Large preview

After we solved the problem of speech recognition, we started to use it everywhere. That was unfortunate because speech recognition on it’s own doesn’t do us a whole lot of good. Interfaces that rely soley on speech recognition require the user to state things a precise way and they can only state the limited number of exact words or phrases that the interface knows about. This is not natural. This is not how a conversation works.

Without NLP, Conversational UI can be true nightmare.

Conversational UI Without NLP

We’re probably all familiar with automated phone menus. These are known as Interactive Voice Response systems — or IVRs for short. They are designed to take the place of the traditional operator and automatically transfer callers to the right place without having to talk to a human. On the surface, this seems like a good idea. In practice, it’s mostly just you waiting while a recorded voice reads out a list of menu items that “may have changed.”




Large preview

A 2011 study from New York University found that 83% of people feel IVR systems “provide either no benefit at all, or only a cost savings benefit to the company.” They also noted that IVR systems “score lower than any other service option.” People would literally rather do anything else than use an automated phone menu.

NLP has changed the IVR market rather significantly in the past few years. NLP can pick a user’s intent out of anything they say, so it’s better to just let them say it and then determine if you support the action.

Check out how AT&T does it.

AT&T has a truly intelligent Conversational UI. It uses NLP to let me just state my intent. Also, notice that I don’t have to know what to say. I can fumble all around and it still picks out my intent.

AT&T also uses information that it already has (my phone number) and then leverages text messaging to send me a link to a traditional visual UI, which is probably a much better UX for making a payment. NLP drives the whole experience here. Without it, the rest of the interaction would not be nearly as smooth.

NLP is powerful, but more importantly, it is also accessible to developers everywhere. You don’t have to know a thing about Machine Learning (ML) or Artificial Intelligence (AI) to use it. All you need to how to do is make an AJAX call. Even I can do that!

Building An NLP Interface

So much of Machine Learning still remains inaccessible to developers. Even the best YouTube videos on the subject quickly become hard to follow with subjects like Neural Networks and Gradient Descents. We have, however, made significant progress in the field of Language Processing, to the point that it’s accessible to developers of nearly any skill level.

Natural Language Processing differs based on the service, but the overall idea is that the user has an intent, and that intent contains entities. That means exactly nothing to you at the moment, so let’s work up a hypothetical Home Automation bot and see how this works.

The Home Automation Example

In the field of Natural Language Processing, the canonical “Hello World” is usually a Home Automation demo. This is because it helps to clearly demonstrate the fundamental concepts of NLP without overloading your brain.

A Home Automation Bot is a service that can control hypothetical lights in a hypothetical house. For instance, we might want to say “Turn on the kitchen lights”. That is our intent. If we said “Hello”, we are clearly expressing a different intent. Inside of that intent, there are two pieces of information that we need to complete the action:

  1. The ‘Location’ of the light (kitchen)
  2. The desired state of the lights ‘Power’ (on/off)

These (Location, Power) are known as entities.

When we are finished designing our NLP interface, we are going to be able to call an HTTP endpoint and pass it our intent: “Turn on the kitchen lights.” That endpoint will return to us the intent (Control Lights) and two objects representing our entities: Location and Power. We can then pass those into a function which actually controls our lights…

function controlLights(location, power) 
  console.log(`Turning $power the $location lights`);
  
  // TODO: Call an imaginary endpoint which controls lights   
}

There are a lot of NLP services out there that are available today for developers. For this example, I’m going to show the LUIS project from Microsoft because it is free to use.

LUIS is a completely visual tool, so we won’t actually be writing any code at all. We’ve already talked about Intents and Entities, so you already know most of the terminology that you need to know to build this interface.

The first step is to create a “Control Lights” intent in LUIS.




Large preview

Before I do anything with that intent, I need to define my Location and Power entities. Entities can be different types — kind of like types in a programming language. You can have dates, lists and even entities that are related to other entities. In this case, Power is a list of values (on, off) and Location is a simple entity, which can be any value.

It will be up to LUIS to be smart enough to figure out exactly what the Location is.




Large preview




Large preview

Now we can begin to train this model to understand all of the different ways that we might ask it to control the lights in a different location. Let’s think of all the different ways that we could do that:

  • Turn off the kitchen lights;
  • Turn off the lights in the office;
  • The lights in the living room, turn them on;
  • Lights, kitchen, off;
  • Turn off the lights (no location).

As I feed these into the Control Lights intent as utterances, LUIS tries to determine where in the intent the entities are. You can see that because Power is a discreet list of values, it gets that right every time.




Large preview

But it has no idea what a Location even is. LUIS wants us to go through this list and tell it where the Location is. That’s done by clicking on a word or group of words and assigning to the right entity. As we are doing this, we are really creating a machine learning model that LUIS is going to use to statistically estimate what qualifies as a Location.




Large preview

When I’m done telling LUIS where in these utterances all the locations are, my dashboard looks like this…




Large preview

Now we train the model by clicking on the “Train” button at the top. Do you feel like a data scientist yet?

Now I can test it using the test panel. You can see that LUIS is already pretty smart. The Power is easy to pick out, but it can actually pick out Locations it has never seen before. It’s doing what your brain does — using the information that it has to make an educated guess. Machine Learning is equal parts impressive and scary.




Large preview

If we try hard enough, we can fool the AI. The more utterances we give it and label, the smarter it will get. I added 35 utterances to mine before I was done and it is close to bullet proof.

So now we get to the important part, which is how we actually use this NLP in an app. LUIS has a “Publish” menu option which allows us to publish our model to the internet where it’s exposed via a single HTTP endpoint. It will look something like this…

https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/c4396135-ee3f-40a9-8b83-4704cddabf7a?subscription-key=19d29a12d3fc4d9084146b466638e62a&verbose=true&timezoneOffset=0&q=

The very last part of that query string is a q= variable. This is where we would pass our intent.

https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/c4396135-ee3f-40a9-8b83-4704cddabf7a?subscription-key=19d29a12d3fc4d9084146b466638e62a&verbose=true&timezoneOffset=0&q=turn on the kitchen lights

The response that we get back looks is just a JSON object.


  "query": "turn on the kitchen lights",
  "topScoringIntent": 
    "intent": "Control Lights",
    "score": 0.999999046
  ,
  "intents": [
    
      "intent": "Control Lights",
      "score": 0.999999046
    ,
    
      "intent": "None",
      "score": 0.0532306843
    
  ],
  "entities": [
    
      "entity": "kitchen",
      "type": "Location",
      "startIndex": 12,
      "endIndex": 18,
      "score": 0.9516622
    ,
    
      "entity": "on",
      "type": "Power",
      "startIndex": 5,
      "endIndex": 6,
      "resolution": 
        "values": [
          "on"
        ]
      
    }
  ]
}

Now this is something that we can work with as developers! This is how you add NLP to any project — with a single REST endpoint. Now you’re free to create a bot with some real brains!

Brian Holt used the browser speech API and a LUIS model to create a voice powered calculator that is running right inside of CodePen. Chrome is required for the speech API.

See the Pen Voice Calculator by Brian Holt (@btholt) on CodePen.

Bot Design Is Still Hard

Having a smart bot is only half the battle. We still need to account for any of the actions that our system might expose, and that can lead to a lot of different logical paths which makes for messy code.

Conversations also happen in stages, so the bot needs to be able to intelligently direct users down the right path without frustrating them or being unable to recover when something goes wrong. It needs to be able to recover when the conversation dies midstream and then starts again. That’s a whole other article and I’ve included some resources below to help.

When it comes to language understanding, the AI platforms are mature and ready to use today. While that won’t help you perfectly design your bot, it will be a key component to building a bot that people don’t hate.

Great UI Is Just Great UI

A final note: As we saw from the AT&T example, a truly smart interface combines great speech recognition, Natural Language Processing, different types of conversational UI (speech and text) and even a visual UI. In short, great UI is just that — great UI — and it is not a zero sum game. Great UIs will leverage all of the technology available to provide the best possible user experience.

Special thanks to Mat Velloso for his input on this article.

Further Resources:

Smashing Editorial
(rb, ra, yk, il)


Visit site: 

The Rise Of Intelligent Conversational UI

Product Marketing Month: Why I’m Writing 30 Blog Posts in 30 Days

alt : https://unbounce.com/photos/30-in-30.mp4https://unbounce.com/photos/30-in-30.mp4

We Have 1.06 Products. Do we suck at product marketing?

I wrote that statement on a whiteboard at the start of a website brainstorm session.

What does 1.06 products mean?

1.06 sums up my frustration at the adoption rate of our new products. Yup, Unbounce is now more than just a landing page builder. We released two new products, namely “overlays” and “sticky bars”, and we grouped them together under an umbrella term “Convertables”.

The number 1 represents our flagship industry-leading landing page product (100% of our customers have adopted it), and the .06 represents the tragic adoption rate of our new products (6%).

And yes, you’d be correct if you noted that “Convertables” isn’t a real word, but then neither is Unbounce, so we went with it after a notable amount of company-wide polling, and general corporate groupthink. More on that later.

So, how does this scenario result in me writing 30 blog posts about product marketing?

Rewind to October 5th: I was in a meeting with fellow co-founders Rick, Carl, and Carter, openly expressing my frustration with the adoption numbers, and Carter interrupted me to ask, “Okay, fine, but what are you going to do about it?”.

Then this video happened…

Awesome, right?! Yeah, it is, until the moment I realized it’s been exactly 301 days since I last wrote a blog post (I’ve been focusing on public speaking), making this level of bravado a tad audacious at best. Aaand, yes I realize I was a little intoxicated in the video.

But, I’ve learned over the years, that being a bit ridiculous in my promises is the only way I really know how to get shit done. When I tell everyone that I’m doing something big, the self-imposed peer pressure is what motivates me to make sure I complete my mission.

Enter Product Marketing Month (PMM): A Product Marketing Journey

This brings me to our blog. We’ve never written much about our products on the blog, in fact, we’ve actively avoided it to let the content speak for itself as an educational pillar of the community, and to remain non-salesy.

I’ve realized though, that it doesn’t make much business sense to be that overtly humble in all marketing communications. There has to be a way to balance exposing people to your product without it detracting from the experience.

It’s my fault in many ways. When I started our blog back in 2009, I had a mission to be different from our competitors, to not come across as a salesperson, and just to provide value and entertaining content that stood out.

We dominated the realm of conversion content for many years, but in an increasingly competitive SaaS martech space, our content is no longer number one, and it’s time that we change our approach.

Which is why we’re doing a blog takeover for the whole of January.

Our goal is to explore a category we’ve not covered before (product marketing), but also to expose a transparent window – transparency is one of our six core values at Unbounce – into our journey as a company, as a marketing team, and myself personally, to become better product marketers.

For me, it’s the first time I’ve ever been involved in product marketing, which will make it a fascinating personal journey reinventing myself as a different kind of marketer.

I’m also cutting the number of speaking gigs I do in 2018 in half, because let’s be honest, in this moment, the success of Unbounce can be more rapidly impacted by me staying home than being on the road.

Transparency

Along the way, I’ll be opening up the Unbounce vault to share our core metrics with you. This will include our churn and product adoption metrics, which we hope to be able to lift in a big way throughout this 30-day experiment. There will be data check-ins throughout, with a halfway report, and then a full “Results Show” at the end.

I’ll also be digging into our analytics to see what the engagement and attribution looks like for every one of the 30 blog posts.

Some of the content will revolve around the learnings and experiences of becoming a better product marketer, and the rest will be an exploration of the ways we’re trying to rethink what our products are, what they mean to our customers, and how we can do a better job communicating their benefits (with some case studies and new ways of thinking – I hope).

I say “I hope” because I’m writing this as you read it. That’s what tends to happen when you commit to something as absurd as 30-in-30.

Follow Along << Mid-Post CTA

I encourage you to follow along by subscribing to our weekly update emails at the bottom of the page. I’m really keen to have our community (that’s you) help us explore how to do this properly, and hopefully, we’ll all learn how to do a better job of marketing our products.

This is a screenshot of the subscribe form at the bottom of the post. Thought you should know.

You can also subscribe by clicking here to launch a popup which contains the subscribe form. << product marketing much?

Aaand I’ve configured it so you’ll see an exit popup when you leave this page. Note, that I’m doing this to show the product in a relevant and hopefully useful manner.

Unbounce Product Adoption Metrics

How do we measure adoption at Unbounce? To understand, it helps to explain a little about how we define a customer. In the old days, a customer was any signup, someone who started a 30-day trial. Over time we learned we should be measuring a little deeper into the customer lifecycle, and decided a customer was someone who paid us twice; once after the 30-day trial, and again after sixty days.

In 2017 we modified this further to someone who pays us three times, giving us a much better sense of true churn numbers.

To be considered a customer who has adopted our products, we have an additional set of app usage criteria:

For landing pages adoption means: a customer who has built and published one or more pages, has set up a custom domain, configured an integration with another tool, and has paid us three times.

For “Convertables” (Overlays & Sticky Bars) adoption means: a customer who has built and published a popup or sticky bar, installed our one-line global Javascript on their website, received at least 10 conversions, and has paid us three times.

Full transparency: 6% adoption for a new product sucks. It sucks really bad.

So what went wrong? Why was adoption so low?

We made some mistakes, namely…

Mistake #1: We called a popup an overlay.
Mistake #2: We created a fictitious umbrella term “Convertables” for only two child products, and for a few months, only one child product.
Mistake #3: We assumed that people would find and use these two products, hidden behind said umbrella term in the app.
Mistake #4: We assumed that the functional user of our landing page product would be the same person who needs to use overlays popups and sticky bars.

How do we un-f*** this problem?

The first thing we’re doing is removing any public-facing mentions of the term “Convertables”. This has excited the marketing team because it’s much easier to market something when you know how to describe it.

Beyond that, the approach I’m taking is a combination of four primary tenets:

  1. First, is a concept I call “Productizing Our Technology” or POT for short. This is about discovering new and novel ways that our platform can be used, that people either haven’t imagined or simply didn’t know was possible.
  2. Second, is exploring the entire Unbounce ecosystem, from the app, to the website, our content channels, and our community, to see how we could do a better job of exposing the benefits of our products to those who can benefit from them.
  3. Third, is using the Product Marketing Month blog takeover to create interactive demonstrations right here on the blog – the goal of which is to reduce the Time to Value (TTV) by creating more obvious ah-ha moments.
  4. Fourth, understanding who the various target personas and functional users of the different products are, and adjusting our targeting and marketing communications to find and speak to those potentially different users.

In regards to #3 the blog takeover, if you take a look at the top of the screen, you’ll see a header bar like this:

Or this one, if you have scrolled down the page:

If you look at the hierarchy of information from left to right, you see: 1) Who we are: logo, 2) What we do: value prop, 3) How to take action: the three big orange buttons.

This is hugely different to the rest of the blog, which retains the navigation of the whole site (I’ve thought that was incongruent for a long time).

My hope is that the new header bar helps more people know what we do, and how our products can help. I’ll be tracking engagement with the 3 CTAs and comparing these 30 posts against our other blog content in terms of its ability to get people to sign up.

Productizing Our Technology: Landing Pages, Popups, & Sticky Bars

I had my own ah-ha moment when I started imagining all the ways that I could hack/modify/extend the ways the Unbounce conversion platform can be used. We have 3 core pieces of product technology (not including our AI/Machine Learning efforts that will power our technology in the future): landing pages, popups, and sticky bars.

By taking our core tech, combining the available features, with new jQuery scripts, CSS, and some 3rd-party integrations, it’s possible to create a plethora of new “mini-products” that if embraced by the community, might inform future product direction.

Take a look at the spreadsheet below. This is my POT matrix. The complete sheet currently houses over 120 new product ideas.

Productizing Unbounce Technology
(Click image for full-size view)

Across the top (in yellow) are the core products, their features (such as targeting, triggers, display frequency), and the different hacks, data sources, and integrations, that can be combined to produce the new products listed in green in the first column.

Each product is flagged as being in one of three states:

NOW: These products are possible now with our existing feature set.
MVP: These products are possible by adding some simple scripts/CSS to extend the core.
NEW: These products would require a much deeper level of product or website development to make them possible. These are the examples that came from “blue sky” ideation, and are a useful upper anchor for what could be done.

I’ll be explaining these use cases in greater detail as the month progresses, and I’ll be building some of them directly into these blog posts as I write them. << FTR this will involve me reverting to my long-extinct coding background to hack the shit out of the blog to show you what I’m talking about.

Please Follow Along

That’s the intro, that’s what happened, and what we’re going to do to try and fix it. Subscribe to the weekly email updates, join the discussion in the comments, and chat directly with me on Twitter.

There is also a full calendar at the bottom of every post that will link to all 30 PMM topics as they roll out.

What’s coming on day 2 of PMM?

Tomorrow’s post is called “55 Simple/Hard/Brilliant Things Your Marketing Team Should Be Doing to Improve Product Awareness & Adoption”. It’s based on the results of rapid-fire brainstorms which exposed quick-win tactics all product marketers can use to expose your products in small and simple ways, to build to a critical mass of awareness.

This should be very relevant to anyone in marketing, and doubly so to those working for a SaaS business.

Here’s to kicking off 2018 in a blaze of product marketing glory.

Cheers,
Oli Gardner

p.s. Please jump into the comments below to let me know what products you’re currently trying to take to market.

View original article – 

Product Marketing Month: Why I’m Writing 30 Blog Posts in 30 Days

Thumbnail

Beyond the buzzword: What “artificial intelligence” means for marketing leaders, right now

By far the greatest danger of artificial intelligence is that people conclude too early that they understand it. ― Eliezer…Read blog postabout:Beyond the buzzword: What “artificial intelligence” means for marketing leaders, right now

The post Beyond the buzzword: What “artificial intelligence” means for marketing leaders, right now appeared first on WiderFunnel Conversion Optimization.

Source article – 

Beyond the buzzword: What “artificial intelligence” means for marketing leaders, right now

Afraid Of AI? Conquer Your Fears By Learning How It Can Boost Your Sales

It’s 2017, and the robots are here. However, artificial intelligence (AI) is nothing to be feared. In fact, AI will help boost your sales, increase conversions while ensuring that your business thrives and stays relevant in an ever-changing world. If you have resisted AI up until now because it sounded too complex, we’re going to explain how it can turbocharge your sales in plain, understandable English. We’ll be covering everything from chatbots, personal assistants to how AI can ramp up your email marketing efforts – as well as tighten up your security. As a business owner, this could be the…

The post Afraid Of AI? Conquer Your Fears By Learning How It Can Boost Your Sales appeared first on The Daily Egg.

Source: 

Afraid Of AI? Conquer Your Fears By Learning How It Can Boost Your Sales

Data-Backed Advice for High-Converting Real Estate Landing Page Design [+ FREE TEMPLATE]

You’re designing a landing page for your Real Estate client, and you turn to “best practice” advice articles to help guide the way.

But there’s a nagging voice at the back of your mind:

Does this “best practice” advice apply indiscriminately to my industry? Does this author really know anything about my audience at all?

“Best practices” become “better practices” when they are industry-specific.

When our design team was recently wireframing new landing page templates for the Unbounce builder, they set out to create industry-specific templates that addressed this truth: different audiences belonging to different industries behave differently. They have different pains, different motivators and different disincentives.

Firm believers that data needs to inform design, our design team sourced their research in two key areas:

  1. Data from the Unbounce Conversion Benchmark Report: The report includes average conversion rates for 10 popular industries, as well as Machine Learning-powered recommendations around reading ease, page length, emotion and sentiment.
  2. High-converting customer landing pages: Our designers looked at the top 10 highest-converting Unbounce landing pages in those industries, and analyzed common design and copy elements across the pages.

Our design team then combined insight from these two key areas of research to build out content and design requirements for the best possible landing page template for each of the 10 industries.

One of these industries was Real Estate, and now we want to share their findings with you.

See a breakdown of their process for designing the Real Estate page template at the bottom of this post, or read on for their key findings about what converts in the Real Estate industry.

Which copy elements convert best in the Real Estate industry?

Word count

The data scientists and conversion rate optimizers who put together the Unbounce Conversion Benchmark Report found that for Real Estate lead capture landing pages, short n’ sweet is better: overall, they saw 33% lower conversion rates for longer landing pages.

This chart shows how the word count relates to conversion rates for the Real Estate vertical. On the x-axis we have word count — on the y-axis, conversion rate.

This was consistent with what the design team saw across high-converting Unbounce customer landing pages in Real Estate: pages were relatively short with concise, to-the-point copy.

Reading ease

The Unbounce Convert Benchmark Report also revealed that in the Real Estate vertical, prospects want simple and accessible language. The predicted conversion rate for a landing page written with 6th grade level language was nearly double that of a page written at the university level.

This chart shows how conversion rates trend with changes to reading ease for the Real Estate Industry. On the x-axis we have the Flesch Reading Ease score — on the y-axis, conversion rate.
According to the Unbounce Conversion Benchmark Report, 41.6% of marketers in the Real Estate industry have at least one page that converts at less than 1.3% (in the 25th percentile for this industry). Download the report here to see the full data story on Real Estate and get recommendations for copy, sentiment, page length and more for nine additional industries.

Fear-inducing language

The Unbounce Conversion Benchmark Report used an Emotion Lexicon and Machine Learning to determine whether words associated with eight basic emotions (anger, anticipation, disgust, fear, joy, sadness, surprise and trust) affected overall conversion rates.

While these emotions did not seem to dramatically correlate with conversion rate in the Real Estate vertical, fear-based language was the exception. We saw a slight negative trend for pages using more fear-inducing terms:

This chart shows how the percentage of copy that evokes fear is related to conversion rates for the Real Estate vertical. On the x-axis we have the percentage of copy that uses words related to fear — on the y-axis, conversion rate.

If more than half a percent of your copy evokes feelings of fear, you could be hurting your conversion rates.

Here are some words commonly associated with fear on Real Estate lead capture landing pages: highest, fire, problem, watch, change, confidence, mortgage, eviction, cash, risk…

See the full list in the Unbounce Conversion Benchmark Report.

Calls to action

When our designers looked at the top 10 highest-converting Unbounce customer landing pages in the Real Estate vertical, they took a close look at the calls to action and found that:

  • Every page provided a detailed description of the offer
  • Almost all had a “request a call back” or “call us” option (other CTAs included “get more info,” “apply now” and “get the pricelist”)
  • Most did an excellent job of including button copy that reinforces what prospects get by submitting the form
If you use a “call us” CTA on your landing pages, make sure you try out our CallRail integration. This will help you track which calls are a result of your paid spend and landing pages!

Here are some examples of the forms and calls to action on some of our highest-converting Real Estate lead capture landing pages:

The usual suspects (benefits, social proof, UVP…)

Without much exception, the pages featured a lot of the copywriting elements that one would expect to see on any high-converting landing page (regardless of vertical):

  • Detailed benefits listed as bullet points
  • A tagline that reinforces the unique value proposition or speaks to a pain point:
  • And not surprisingly, testimonials. One page went above and beyond with a video testimonial:

Which design elements convert best in the Real Estate industry?

The highest-converting Real Estate landing pages included lots of imagery:

  • Beautiful hero shots of the interior and exterior of properties
  • Maps
  • Full-width photography backgrounds
  • Floor plans

Some examples:

Our designers also studied other design features as basic guidelines for the template they were then going to create.

While these specifics are meant to be taken with a grain of salt (you may already have brand colors and fonts!) they could serve as a good starting point if you’re starting completely from scratch and want to know what others are up to.

Many of the high-converting pages had:

  • San-serif fonts
  • Palettes of deep navy and forest green
  • Orange (contrasting) call to action buttons
The highest-converting landing pages in the Real Estate industry sit at 11.2%. If your Real Estate page converts at over 8.7%, you’re beating 90% of your competitors’ pages. See the breakdown of median and top conversion rates (and where you stand!) via the Unbounce Conversion Benchmark Report.

Behold, the template our designers created

After synthesizing all that research, our Senior Art Director Cesar Martínez took to his studio (okay, his desk), and drafted up this beautiful Real Estate landing page template:

Not only is the template beautiful, it was created by analyzing actual data: what makes for a high-performing landing page in the Real Estate industry via the Unbounce Benchmark Report and high-converting customer pages.

Footnote: The design process

Curious about the process our designers used to develop this data-backed Real Estate landing page template? Here are the steps they followed:

  1. For the 10 highest-converting customer landing pages, they analyzed all common elements (such as form, what type of information is collected, what type of offer, if there are any testimonials, etc). This allowed them to build their content requirements.
  2. They referred to the word count recommendations in the Unbounce Conversion Benchmark Report and designed for that word count limit.
  3. They referred to reading ease level recommendations for that specific industry from the Benchmark Report and shared the information with their copywriter.
  4. They sketched out a rough idea of their potential landing page template.
  5. They selected typography and colors relevant to the industry based on what was popular in the 10 examples.
  6. They named their imaginary company in the industry and sketched out some potential logos. They picked photography built out a moodboard.
  7. That helped them gather all the information they needed to build out their template!

See the article here: 

Data-Backed Advice for High-Converting Real Estate Landing Page Design [+ FREE TEMPLATE]

Glossary: Guerilla Marketing

guerilla marketing

Guerrilla marketing is a form of marketing that utilizes unconventional tactics to get maximum results when promoting a business or service. As the name suggests, this style of marketing relies heavily upon surprise, creativity and shock and awe tactics. Thus, large quantities of money are not necessarily required to perform guerrilla marketing — making it an ideal strategy for startups, small businesses and enterprises alike. It’s a much more personal form of marketing and tends to humanize even the largest of brands. Regardless of the size of your company, a little excitement and buzz surrounding your brand can always be…

The post Glossary: Guerilla Marketing appeared first on The Daily Egg.

Source article: 

Glossary: Guerilla Marketing

Web Development Reading List #181: Mass Deployments, Prepack, And Accessible Smart Cities

In a world between building accessible interfaces, optimizing the experiences for users, and big businesses profiting from this, we need to find a way to use our knowledge meaningfully. When we read that even the engineers who built it don’t know how their autonomous car algorithm works or that the biggest library of books that mankind ever saw is in the hand of one single company and not accessible to anyone, we might lose our faith in what we do as developers.

More: 

Web Development Reading List #181: Mass Deployments, Prepack, And Accessible Smart Cities

Thumbnail

Marketing Machines: Is Machine Learning Helping Marketers or Making Us Obsolete?

Hollywood paints a grim picture of a future populated by intelligent machines. Terminator, 2001: A Space Odyssey, The Matrix and countless other films show us that machines are angry, they’re evil and — if given the opportunity — they will not hesitate to overthrow the human race.

Films like these serve as cautionary tales about what could happen if machines gain consciousness (or some semblance of). But in order for that to happen humans need to teach machines to think for themselves. This may sound like science fiction but it’s an actual discipline known as machine learning.

machine-learning-and-marketing-featured-650
The machines are coming. But fear not — they could help you become a better marketer. Image via Shutterstock.

Still in its infancy, machine learning systems are being applied to everything from filtering spam emails, to suggesting the next series to binge-watch and even matching up folks looking for love.

For digital marketers, machine learning may be especially helpful in getting products or services in front of the right prospects, rather than blanket-marketing to everyone and adding to the constant noise that is modern advertising. Machine learning will also be key to predicting customer churn and attribution: two thorns in many digital marketers’ sides.

Despite machine learning’s positive impact on the digital marketing field, there are questions about job security and ethics that cannot be swept under the rug. Will marketing become so automated that professional marketers become obsolete? Is there potential for machine learning systems to do harm, whether by targeting vulnerable prospects or manipulating people’s emotions?

These aren’t just rhetorical questions. They get to the heart of what the future of marketing will look like — and what role marketers will play in it.

What is Machine Learning?

Machine learning is a complicated subject, involving advanced math, code and overwhelming amounts of data. Luckily, Tommy Levi, Director of Data Science at Unbounce, has a PhD in Theoretical Physics. He distills machine learning down to its simplest definition:

You can think of machine learning as using a computer or mathematics to make predictions or see patterns in data. At the end of the day, you’re really just trying to either predict something or see patterns, and then you’re just using the fact that a computer is really fast at calculating.

You may not know it, but you likely interact with machine learning systems on a daily basis. Have you ever been sucked into a Netflix wormhole prompted by recommended titles? Or used Facebook’s facial recognition tool when uploading and tagging an image? These are both examples of machine learning in action. They use the data you input (by rating shows, tagging friends, etc.) to produce better and more accurate suggestions over time.

Other examples of machine learning include spell check, spam filtering… even internet dating — yes, machine learning has made its way into the love lives of many, matching up singles using complicated algorithms that take into consideration personality traits and interests.


Machine learning may be helpful in getting products or services in front of the right prospects.
Click To Tweet


How Machine Learning Works

While it may seem like witchcraft to the layperson, running in the background of every machine learning system we encounter is a human-built machine that would have gone through countless iterations to develop.

Facebook’s facial recognition tool, which can recognize your face with 98% accuracy, took several years of research and development to produce what is regarded as cutting-edge machine learning.

So how exactly does machine learning work? Spoiler alert: it’s complicated. So without going into too much detail, here’s an introduction to machine learning, starting with the two basic techniques.

Supervised learning

Supervised learning systems rely upon humans to label the incoming data — at least to begin with — in order for the systems to better predict how to classify future input data.

Gmail’s spam filter is a great example of this. When you label incoming mail as either spam or not spam, you’re not only cleaning up your inbox, you’re also training Gmail’s filter (a machine learning system) to identify what you consider to be spam (or not spam) in the future.

Unsupervised learning

Unsupervised learning systems use unlabeled incoming data, which is then organized into clusters based on similarities and differences in the data. Whereas supervised learning relies upon environmental feedback, unsupervised learning has no environmental feedback. Instead, data scientists will often use a reward/punishment system to indicate success or failure.

According to Tommy, this type of machine learning can be likened to the relationship between a parent and a young child. When a child does something positive they’re rewarded. Likewise, when “[a machine] gets it right — like it makes a good prediction — you kind of give it a little pat on the back and you say good job.”

Like any child (or person for that matter), the system ends up trying to maximize the positive reinforcement, thus getting better and better at predicting.

The Power of Machine Learning

A lot of what machine learning can do is yet to be explored, but the main benefit is its ability to wade through and sort data far more quickly and efficiently than any human could, no matter how clever.

Tommy is currently experimenting with an unsupervised learning system that clusters landing pages with similar features. Whereas one person could go through a few hundred pages in a day, this model can run through 300,000 pages in 20 minutes.

How do your landing page conversion rates compare against your industry competitors?

We analyzed the behavior of 74,551,421 visitors to 64,284 lead generation landing pages. Now we want to share average industry conversion rates with you in the Unbounce Conversion Benchmark Report.
By entering your email you’ll receive other resources to help you improve your conversion rates.

The advantage is not just speed, it’s also retention and pattern recognition. Tommy explains:

To go through that many pages and see those patterns and hold it all in memory and be able to balance that — that’s where the power is.

For some marketers, this raises a troubling question: If machine learning systems solve problems by finding patterns that we can’t see, does this mean that marketers should be worried about job security?

The answer is more nuanced than a simple yes or no.

Machine Learning and the Digital Marketer

As data becomes the foundation for more and more marketing decisions, digital marketers have been tasked with sorting through an unprecedented amount of data.

This process usually involves hours of digging through analytics, collecting data points from marketing campaigns that span several months. And while focusing on data analysis and post-mortems is incredibly valuable, doing so takes a significant amount of time and resources away from future marketing initiatives.

As advancements in technology scale exponentially, the divide between teams that do and those that don’t will become more apparent. Those that don’t evolve will stumble and those that embrace data will grow — this is where machine learning can help.


Marketers that don’t embrace data will fumble. Those that do will grow — ML can help.
Click To Tweet


That being said, machine learning isn’t something digital marketers can implement themselves after reading a quick tutorial. It’s more comparable to having a Ferrari in your driveway when you don’t know how to drive standard… or maybe you can’t even drive at all.

Until the day when implementing a machine learning system is just a YouTube video away, digital marketers could benefit from keeping a close eye on the companies that are incorporating machine learning into their products, and assessing whether they can help with their department’s pain points.

So how are marketers currently implementing machine learning to make decisions based on data rather than gut instinct? There are many niches in marketing that are becoming more automated. Here are a few that stand out.

Lead scoring and machine learning

Lead scoring is a system that allows marketers to gauge whether a prospect is a qualified lead and thus worth pursuing. Once marketing and sales teams agree on the definition of a “qualified lead,” they can begin assigning values to different qualified lead indicators, such as job title, company size and even interaction with specific content.

These indicators paint a more holistic picture of a lead’s level of interest, beyond just a form submission typically associated with lead generation content like ebooks. And automating lead scoring takes the pressure off marketers having to qualify prospects via long forms, freeing them up to work on other marketing initiatives.

Once the leads have reached the “qualified” threshold, sales associates can then focus their efforts on those prospects — ultimately spending their time and money where it matters most.

Content marketing and copywriting

Machine learning models can analyze data points beyond just numbers — including words on your website, landing page or PPC ads. Machine learning systems can find patterns in language and detect words that elicit the most clicks or engagement.

Is emotional copywriting on your landing page effective in your industry?

We used machine learning to help create the Unbounce Conversion Benchmark Report, which shares insights on how different aspects of page copy correspond to conversion rates across 10 industries.
By entering your email you’ll receive other resources to help you improve your conversion rates.

But can a machine write persuasive copy? Maybe, actually.

A New York-based startup called Persado offers a “cognitive content platform” that uses math, data, natural language processing, emotional language data and machine learning systems to serve the best copy and images to spur prospects into action. It does this by analyzing all the language data each client has ever interacted with and serving future prospects with the best possible words or phrases. An A/B test could never achieve this at the same scale.

Think this is a joke? With over $65 million in venture capital and a reported average conversion rate uplift of 49.5% across 4,000 campaigns, Persado’s business model is no laughing matter.

Still, there is no replacement for a supremely personalized piece of content delivered straight to your client’s inbox — an honest call to action from one human to another.

Recently Unbounce’s Director of Campaign Strategy, Corey Dilley, sent an email to our customers. It had no sales pitch, no call to action button. It was just Corey reaching out and saying, “Hey.”

corey-dilley-marketing-email-1

Corey’s email had an open rate of 41.42%, and he received around 80 personal responses. Not bad for an email written by a human!

Sometimes it’s actions — like clicks and conversions — you want to elicit from customers. Other times the goal is to build rapport. In some cases we should let the machines do the work, but it’s up to the humans to keep the content, well, human.


There is no replacement for personalized content and an honest ask from one human to another.
Click To Tweet


Machine learning for churn prediction

In the SaaS industry, churn is a measure of the percentage of customers who cancel their recurring revenue subscriptions. According to Tommy, churn tells a story about “how your customers behave and feel. It’s giving a voice to the customers that we don’t have time or the ability to talk to.”

Self-reporting methods such as polls and surveys are another good way to give a voice to these customers. But they’re not always scalable — large data sets can be hard for humans to analyze and derive meaning from.

Self-reporting methods can also skew your results. Tommy explains:

The problem with things like surveys and popups is that they’re only going to tell you what you’ve asked about, and the type of people that answer surveys are already a biased set.

Machine learning systems, on the other hand, can digest a larger number of data points, and with far less bias. Ideally the data is going to reveal what marketing efforts are working, thus leading to reduced churn and helping to move customers down the funnel.

This is highly relevant for SaaS companies, whose customers often sign up for trials before purchasing the product. Once someone starts a trial, the marketing department will start sending them content in order to nurture them into adopting the service and become engaged.

Churn models can help a marketing team determine which pieces of content lead to negative or positive encounters — information that can inform and guide the optimization process.

Ethical Implications of Machine Learning in Marketing

We hinted at the ethical implications of machine learning in marketing, but it deserves its own discussion (heck, it deserves its own book). The truth is, machine learning systems have the potential to cause legitimate harm.

According to Carl Schmidt, Co-Founder and Chief Technology Officer at Unbounce:

Where we are really going to run into ethical issues is with extreme personalization. We’re going to teach machines how to be the ultimate salespeople, and they’re not going to care about whether you have a compulsive personality… They’re just going to care about success.

This could mean targeting someone in rehab with alcohol ads, or someone with a gambling problem with a trip to Las Vegas. The machine learning system will make the correlation, based on the person’s internet activity, and it’s going to exploit that.

Another dilemma we run into is with marketing aimed at affecting people’s emotions. Sure copywriters often tap into emotions in order to get a desired response, but there’s a fine line between making people feel things and emotional manipulation, as Facebook discovered in an infamous experiment.

If you aren’t familiar with the experiment, here’s the abridged version: Facebook researchers adapted word count software to manipulate the News Feeds of 689,003 users to determine whether their emotional state could be altered if they saw fewer positive posts or fewer negative posts in their feeds.

Posts were deemed either positive or negative if they contained at least one positive or negative word. Because researchers never saw the status updates (the machine learning system did the filtering) technically it fell within Facebook’s Data Use Policy.

However, public reaction to the Facebook experiment was generally pretty scathing. While some came to the defense of Facebook, many criticized the company for breaching ethical guidelines for informed consent.

In the end, Facebook admitted they could have done better. And one good thing did come out of the experiment: It now serves as a benchmark for when machine learning goes too far, and as a reminder for marketers to continually gut-check themselves.

For Carl, it comes down to intent:

If I’m Facebook, I might be worried that if we don’t do anything about the pacing and style of content, and we’re inadvertently presenting content that could be reacted to negatively, especially to vulnerable people, then we would want to actively understand that mechanism and do something about it.

While we may not yet have a concrete code of conduct around machine learning, moving forward with good intentions and a commitment to do no harm is a good place to start.

The Human Side of Machine Learning

Ethical issues aside, the rise of machines often implies the fall of humans. But it doesn’t have to be one or the other.

“You want machines to do the mundane stuff and the humans to do the creative stuff,” Carl says. He continues:

Computers are still not creative. They can’t think on their own, and they generally can’t delight you very much. We are going to get to a point where you could probably generate highly personal onboarding content by a machine. But it [will have] no soul.

That’s where the human aspect comes in. With creativity and wordsmithing. With live customer support. Heck, it takes some pretty creative data people to come up with an algorithm that recognizes faces with 98% accuracy.

Imagine a world where rather than getting 15 spam emails a day, you get just one with exactly the content you would otherwise be searching for — content written by a human, but served to you by a machine learning system.

While pop culture may say otherwise, the future of marketing isn’t about humans (or rather, marketers) versus machines. It’s about marketers using machines to get amazing results — for their customers and their company.

Machine learning systems may have an edge when it comes to data sorting, but they’re missing many of the things that make exceptional marketing experiences: empathy, compassion and a true understanding of the human experience.

Editor’s note: This article originally appeared in The Split, a digital magazine by Unbounce.

See original article – 

Marketing Machines: Is Machine Learning Helping Marketers or Making Us Obsolete?

Thumbnail

How to Leverage eCommerce Conversion Optimization Through Different Channels to Maximize Growth

Note: This is a guest article written by Sujan Patel, co-founder of Web Profits. Any and all opinions expressed in the post are Sujan’s.


“If you build it, they will come” only works in the movies. In the real world, if you’re serious about e-commerce success, it’s up to you to grab the CRO bull by the horns and make the changes needed to maximize your growth.

Yet, despite the potential of conversion rate optimization to have a major impact on your store’s bottom line, only 59% of respondents to an Econsultancy survey see it as crucial to their overall digital marketing strategy. And given that what’s out of sight is out of mind, you can bet that many of the remaining 41% of businesses aren’t prioritizing this strategy with the importance it deserves.

Implementing an e-commerce CRO program may seem complex, and it’s easy to get overwhelmed by the number of possible things to test. To simplify your path to proper CRO, we’ve compiled a list of ways to optimize your site by channel.

This list is by no means exclusive; every marketing channel supports as many opportunities for experimentation as you can dream up. Some of these, however, are the easiest to put into practice, especially for new e-commerce merchants. Begin with the tactics described here; and when you’re ready to take your campaigns to the next level, check out the following resources:

On-Page Optimization

Your website’s individual pages represent one of the easiest opportunities for implementing a conversion optimization campaign, thanks to the breadth of technology tools and the number of established testing protocols that exist currently.

These pages can also be one of the fastest, thanks to the direct impact your changes can have on whether or not website visitors choose to buy.

Home Page

A number of opportunities exist for making result-driven changes to your site’s home page. For example, you can test:

  • Minimizing complexity: According to ConversionXL, “simple” websites are scientifically better.
  • Increasing prominence and appeal of CTAs: If visitors don’t like what you’re offering as part of your call-to-action (or worse, if they can’t find your CTA at all), test new options to improve their appeal.
  • Testing featured offers: Even template e-commerce shops generally offer a spot for featuring specific products on your store’s home page. Test which products you place there, the price at which you offer them, and how you draw attention to them.
  • Testing store policies – Free shipping is known to reduce cart abandonment. Implement consumer-friendly policies and test the way you feature them on your site.
  • Trying the “five-second test” – Can visitors recall what your store is about in 5 seconds or less? Attention spans are short, and you might not have longer than that to convince a person to stick around. Tools like UsabilityHub can get you solid data.

Home Page Optimization Case Study

Antiaging skincare company NuFACE made the simple change of adding a “Free Shipping” banner to its site header.

Original

eCommerce conversion Optimization - Nuface Control

Test Variation

eCommerce conversion Optimization - Nuface Variation

The results of making this change alone were a 90% increase in orders (with a 96% confidence level) and a 7.32% lift in the average order value.

Product Pages

If you’re confident about your home page’s optimization, move on to getting the most out of your individual product pages by testing your:

  • Images and videos
  • Copy
  • Pricing
  • Inclusion of social proof, reviews, and so on

Product Page Optimization Case Study

Underwater Audio challenged itself to simplify the copy on its product comparison page, testing the new page against its original look.

Original

Underwater Audio Control

Test Variation

Underwater Control Variation - eCommerce conversion rate optimization

This cleaner approach increased website sales for Underwater Audio by 40.81%.

Checkout Flow

Finally, make sure customers aren’t getting hung up in your checkout flow by testing the following characteristics:

Checkout Flow Optimization Case Study

A Scandinavian gift retailer, nameOn, reduced the number of CTAs on their checkout page from 9 to 2.

Original

nameon-1

Test Variation

nameon-2

Making this change led to an estimated $100,000 in increased sales per year.

Lead Nurturing

Proper CRO doesn’t just happen on your site. It should be carried through to every channel you use, including email marketing. Give the following strategies a try to boost your odds of driving conversions, even when past visitors are no longer on your site.

Email Marketing

Use an established email marketing program to take the steps below:

Case Study

There are dozens of opportunities to leverage email to reach out to customers. According to Karolina Petraškienė of Soundest, sending a welcome email results in:

4x higher open rates and 5x higher click rates compared to other promotional emails. Keeping in mind that in e-commerce, average revenue per promotional email is $0.02, welcome emails on average result in 9x higher revenue — $0.18. And if it’s optimized effectively, revenue can be as high as $3.36 per email.”

Live Chat

LemonStand shares that “live chat has the highest satisfaction levels of any customer service channel, with 73%, compared with 61% for email and 44% for phone.” Add live chat to your store and test the following activities:

Case Study

LiveChat Inc.’s report on chat greeting efficiency shares the example of The Simply Group, which uses customized greetings to assist customers having problems at checkout. Implementing live chat has enabled them to convert every seventh greeting to a chat, potentially saving sales that would otherwise be lost.

Content Marketing

Content marketing may be one of the most challenging channels to optimize for conversions, given the long latency periods between reading content pieces and converting. The following strategies can help:

  • Tie content pieces to business goals.
  • Incorporate content upgrades.
  • Use clear CTAs within content.
  • Test content copy, messaging, use of social proof, and so on.
  • Test different distribution channels and content formats.

Case Study

ThinkGeek uses YouTube videos as a fun way to feature their products and funnel interested prospects back to their site. Their videos have been so successful that they’ve accumulated 180K+ subscribers who tune in regularly for their content.

thinkgeek

Post-Acquisition Marketing

According to Invesp, “It costs five times as much to attract a new customer, than to keep an existing one.” Continuing to market to past customers, either in the hopes of selling new items or encouraging referrals, is a great way to boost your overall performance.

Advocacy

Don’t let your CRO efforts stop after a sale has been made. Some of your past clients can be your best sources of new customers, if you take the time to engage them properly.

  • Create an advocacy program: Natural referrals happen, but having a dedicated program turbocharges the process.
  • Test advocacy activation programs: Install a dedicated advocacy management platform like RewardStream or ReferralSaaSquatch and test different methods for promoting your new offering to customers with high net promoter scores.
  • Test different advocate incentives: Try two-way incentives, coupon codes, discounted products, and more.
  • Invest in proper program launch, goal-setting, and ongoing evaluation/management: Customer advocacy programs are never truly “done.”

Case Study

Airbnb tested its advocacy program invitation copy and got better results with the more unselfish version.

airbnb

Reactivation

As mentioned above in the funnel-stage email recommendation, reactivation messages can be powerful drivers of CRO success.

Pay particular attention to these 2 activities:

  • Setting thresholds for identifying inactive subscribers
  • Building an automated reactivation workflow that’s as personalized as possible

Case Study

RailEasy increased opens by 31% and bookings by 38% with a reactivation email featuring a personalized subject line.

raileasy

Internal Efforts

Lastly, make CRO an ongoing practice by prioritizing it internally, rather than relegating it to “something the marketing department does.”

Ask CRO experts, and they’ll tell you that beyond the kinds of tactics and strategies described above, having a culture of experimentation and testing is the most important step you can take to see results from any CRO effort.

Here’s how to do it:

Have an idea for another way CRO can be used within e-commerce organizations? Leave your suggestions in the comments below.

0

0 ratings

How will you rate this content?

Please choose a rating

The post How to Leverage eCommerce Conversion Optimization Through Different Channels to Maximize Growth appeared first on VWO Blog.

This article is from: 

How to Leverage eCommerce Conversion Optimization Through Different Channels to Maximize Growth

Just another WordPress site