Tag Archives: body

Designing For The Tactile Experience




Designing For The Tactile Experience

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

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

Less Haptic Stimuli, Less Experience

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

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

Hold, Push, Swipe, Tap

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

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

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

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

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

Tactile Feedback

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


Man holding an open book


Fingers are able to sense the progress of a book (Image: on Unsplash) (View large version)

Different Activities, Different Movements

Consider some actions we perform in the physical world:

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

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

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

Whereas in the world of screens:

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

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

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


Man with rings on his fingers holding paper notes and cigarette


(Image: Jeremy Paige on Unsplash) (View large version)

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

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

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

Designing For Touch

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

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

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

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


Finger dialing number on a palm with projected numbers


Using a palm to dial a phone number. (Image: pranavmistry.com) (View large version)

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


Two open palms hold a tiny elephant


Magic Leap connects ‘real’ and virtual. (Image: magic-leap.reality.newsView large version)

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

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

2. Involve More Sensory Experiences In Your Design.

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

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

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

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

Girl with VR head-mounted display and controllers in her hands and girl holding wire


Classic VR controllers. (Image credit) (View large version)

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

Set of images of man with haptic VR gloves


Haptic VR controllers still look a bit utopian. (Image: dextarobotics.com) (View large version)

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

Man touching big rock with shining symbol


The Void game (Image: thevoid.com) (View large version)

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

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

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


Hand reaching for ZEI tracking device


ZEI moves screen tasks to tangible reality. (Image: timeular.com) (View large version)

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

4. Transfer Your Digital Product To Tangible Experiences.

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

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

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


Man touching Ableton Push device


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

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

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

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

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


Tablet mirroring kids playing game KOSKI, enhanced with imaginative plants, figures and waterfall


KOSKI (Image: koskigame.com) (View large version)

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

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

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


Man's hands stretching FabricKeyboard


FabricKeyboard (Image: Irmandy Wicaksono on MIT Media Lab) (View large version)

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

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

Tangible Future

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

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

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

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


Read More:

Designing For The Tactile Experience

Do You Believe In…Conversion Magic?

conversion elixir
Do you believe in… conversion magic? Image via Shutterstock.

Like any potions master would attest, the secret to a great elixir lies in the measured combination of its ingredients.

Over the years, Titan PPC, a full-service pay-per-click advertising agency based in Vancouver, has developed a “magic formula” for designing lead generation landing pages that convert at average of 15% or higher.

The secret ingredient? For company founder, Patrick Schrodt, it doesn’t boil down to just one.

Read on to find out what key ingredients make Patrick’s lead gen landing pages so powerful. Then test them yourself with the new, kick-ass Hyperion template in the Unbounce app.

1. Make your landing pages relevant

Any smart marketer knows that when visitors reach a landing page, they won’t all have the same intentions for being there. Some may have clicked an ad looking for a plumber in West Seattle where others may have clicked one looking for a plumber in Capitol Hill.

But if your client is a plumbing company that serves the entire Seattle metropolitan area, your landing page should show both the visitors from West Seattle and Capitol Hill that you’ve got the service they need in the location they want it.

In other words, you want to use geo-targeting to make your landing pages especially relevant to your prospects. As Patrick explains:

There’s always been geo-based searches and there always will be. For our own campaigns, we’ve gone as targeted as including a map on every landing page. We highlight a visitors location on the map depending on the where their search is coming from — people go crazy for it!

And the conversion rates don’t lie.

Watch this clip to hear how Titan PPC used geo-targeting to increase a client’s on-page conversion rates from 6% to 33%, practically overnight.

Interview with Patrick Schrodt, founder of Titan PPC.

2. Use (awesome) images to break up your body copy

Never judge a book by its cover… right?

Well, fact is, when a prospect reaches your lead gen landing page, the first thing they’ll do is judge your offer or product by the way you’ve presented it to them. And they’ll do it within seconds.

That’s why you want to make sure it looks so good they won’t want to leave.

The key to keeping prospects interested? Great photography. According to Patrick:

Images help prospects get a clear picture of your client’s product or offer, and it shows them you’re a professional.

Titan PPC adds full-page horizontal image galleries throughout their lead gen landing pages.

It helps break up a visitor’s attention as they scroll by giving them something nice to look at.

But you can’t just slap a bunch of images into a gallery and hope that it all comes together.

If you’re going to source images for clients, you have to make sure you grab photos from a series. I’ve seen landing pages where it’s obvious that each image belongs to a different suite and it’s not coherent or nice to look at.

Check out this example of cohesive image galleries on one of Titan PPC’s lead gen landing pages for a lawn mowing client in Philadelphia:

GrasLawn

Screenshot of cohesive image galleries, landing page designed by Titan PPC.

3. Remind visitors why they are on your page

Remember that bit about making sure your landing pages were super relevant to your visitors? Well, that sometimes means reminding them exactly why they are on your landing page.

For Titan PPC, the best way to do that is by adding a smooth scroll call-to-action (CTA) bar right below the horizontal image gallery.

Why? Because it brings a prospect right back to where you want them: the form.

It works because every time a visitor sees something visual and eye catching [like the image galleries], they’re then prompted to fill out the form.

4. Make the form match the offer

Speaking of taking prospects back to where you want them, the design of a form on your landing page should never be an afterthought. That means weighing, measuring and sifting every item from the questions to the CTA so it’s fully optimized to ensure a conversion.

It’s so key that the form matches the offer. Otherwise a prospect will just be turned off.

So if your client is offering a 100% free quote on plumbing services, then the form on your landing page should reiterate, loud and clear, that the offer comes at no price.

Sounds pretty straight-forward, doesn’t it?

But matching a form to an offer also means making sure you have a solid understanding of your target audience. As Patrick explains:

For real-estate clients, the CTA is always to download a free floor plan. But for clients that are service based, like plumbers or roofers, the CTA is always to get a free quote.

It all comes back to personalization: different types of prospects want to see different kinds of offers. According to Patrick, real-estate prospects want the feeling of exclusivity, whereas service-seeking prospects are probably just looking for the cheapest way to fix a runny faucet or leaky roof.

Titan PPC’s last tip for optimizing the form? Make the form catch your prospect’s attention.

We always put a starburst or icon in the corner of the form. It’s usually something like ‘100% free’ so it pulls a visitor in and reminds them why they want to fill it out!”

Here’s an example of what Patrick means:

Screen Shot 2016-08-30 at 2.28.41 PM
Screenshot of a high-converting landing page form, designed by Titan PPC.

From showing your visitors ultra-relevant content to making sure that content has awesome design and flow, the landing page magic formula is all about giving prospects exactly what they’re looking for and expecting to see when they land on your page.

Care to try some of Patrick’s tricks yourself? Build a landing page in Unbounce today with the Hyperion template, design inspired by Titan PPC’s powerful elixir for designing landing pages that convert.

View original:  

Do You Believe In…Conversion Magic?

Do You Believe in… Conversion Magic?

conversion elixir
Do you believe in… conversion magic? Image via Shutterstock.

Like any potions master would attest, the secret to a great elixir lies in the measured combination of its ingredients.

Over the years, Titan PPC, a full-service pay-per-click advertising agency based in Vancouver, has developed a “magic formula” for designing lead generation landing pages that convert at average of 15% or higher.

The secret ingredient? For company founder, Patrick Schrodt, it doesn’t boil down to just one.

Read on to find out what key ingredients make Patrick’s lead gen landing pages so powerful. Then test them yourself with the new, kick-ass Hyperion template in the Unbounce app.

1. Make your landing pages relevant

Any smart marketer knows that when visitors reach a landing page, they won’t all have the same intentions for being there. Some may have clicked an ad looking for a plumber in West Seattle where others may have clicked one looking for a plumber in Capitol Hill.

But if your client is a plumbing company that serves the entire Seattle metropolitan area, your landing page should show both the visitors from West Seattle and Capitol Hill that you’ve got the service they need in the location they want it.

In other words, you want to use geo-targeting to make your landing pages especially relevant to your prospects. As Patrick explains:

There’s always been geo-based searches and there always will be. For our own campaigns, we’ve gone as targeted as including a map on every landing page. We highlight a visitors location on the map depending on the where their search is coming from — people go crazy for it!

And the conversion rates don’t lie.

Watch this clip to hear how Titan PPC used geo-targeting to increase a client’s on-page conversion rates from 6% to 33%, practically overnight.

Interview with Patrick Schrodt, founder of Titan PPC.

2. Use (awesome) images to break up your body copy

Never judge a book by its cover… right?

Well, fact is, when a prospect reaches your lead gen landing page, the first thing they’ll do is judge your offer or product by the way you’ve presented it to them. And they’ll do it within seconds.

That’s why you want to make sure it looks so good they won’t want to leave.

The key to keeping prospects interested? Great photography. According to Patrick:

Images help prospects get a clear picture of your client’s product or offer, and it shows them you’re a professional.

Titan PPC adds full-page horizontal image galleries throughout their lead gen landing pages.

It helps break up a visitor’s attention as they scroll by giving them something nice to look at.

But you can’t just slap a bunch of images into a gallery and hope that it all comes together.

If you’re going to source images for clients, you have to make sure you grab photos from a series. I’ve seen landing pages where it’s obvious that each image belongs to a different suite and it’s not coherent or nice to look at.

Check out this example of cohesive image galleries on one of Titan PPC’s lead gen landing pages for a lawn mowing client in Philadelphia:

GrasLawn

Screenshot of cohesive image galleries, landing page designed by Titan PPC.

3. Remind visitors why they are on your page

Remember that bit about making sure your landing pages were super relevant to your visitors? Well, that sometimes means reminding them exactly why they are on your landing page.

For Titan PPC, the best way to do that is by adding a smooth scroll call-to-action (CTA) bar right below the horizontal image gallery.

Why? Because it brings a prospect right back to where you want them: the form.

It works because every time a visitor sees something visual and eye catching [like the image galleries], they’re then prompted to fill out the form.

4. Make the form match the offer

Speaking of taking prospects back to where you want them, the design of a form on your landing page should never be an afterthought. That means weighing, measuring and sifting every item from the questions to the CTA so it’s fully optimized to ensure a conversion.

It’s so key that the form matches the offer. Otherwise a prospect will just be turned off.

So if your client is offering a 100% free quote on plumbing services, then the form on your landing page should reiterate, loud and clear, that the offer comes at no price.

Sounds pretty straight-forward, doesn’t it?

But matching a form to an offer also means making sure you have a solid understanding of your target audience. As Patrick explains:

For real-estate clients, the CTA is always to download a free floor plan. But for clients that are service based, like plumbers or roofers, the CTA is always to get a free quote.

It all comes back to personalization: different types of prospects want to see different kinds of offers. According to Patrick, real-estate prospects want the feeling of exclusivity, whereas service-seeking prospects are probably just looking for the cheapest way to fix a runny faucet or leaky roof.

Titan PPC’s last tip for optimizing the form? Make the form catch your prospect’s attention.

We always put a starburst or icon in the corner of the form. It’s usually something like ‘100% free’ so it pulls a visitor in and reminds them why they want to fill it out!”

Here’s an example of what Patrick means:

Screen Shot 2016-08-30 at 2.28.41 PM
Screenshot of a high-converting landing page form, designed by Titan PPC.

From showing your visitors ultra-relevant content to making sure that content has awesome design and flow, the landing page magic formula is all about giving prospects exactly what they’re looking for and expecting to see when they land on your page.

Care to try some of Patrick’s tricks yourself?

Sign up for a free 30-day trial of Unbounce and try the Hyperion template, a design inspired by Titan PPC’s powerful elixir for high-converting landing pages.

More here: 

Do You Believe in… Conversion Magic?

Simple Recipes for No-Fail Landing Page Copy [+ Free Downloadable Worksheet]

cake ingredients
Who knew landing pages and cake had so much in common? Image via Shutterstock.

In some ways, building a landing page is like baking a cake. Certain people prefer chocolate, and others like cream fillings, but there are some fundamental formulas (for both cakes and landing pages) that are tried and tested, and proven to produce positive results.

This post is a recipe for a solid vanilla sponge landing page. For advice on design (a.k.a. the buttercream frosting), check out these posts on user experience and essential design principles.

Here are the formulas we’ll cover in this post, using examples from great landing pages:

  • Action words + Product reference = Winning headline
  • Your exact offering + Promise of ease = Winning subheader
  • Your best offerings + Worded in the form of benefit statements + Appropriate sectioning = Winning body content
  • Active words + ‘I want to…’ + A/B testing = Winning call to action

Want to test the formulas out for yourself?

Download our FREE worksheet for creating no-fail landing page copy.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

The header is always active — it wants you to do something. The header almost always directly references the product or service, as well. As Kurt Vonnegut said,

To hell with suspense. Readers should have such complete understanding of what is going on, where and why, that they could finish the story themselves, should cockroaches eat the last few pages.

What are active words?

In the same way that active voice makes a sentence stronger by shifting focus onto the subject, active words help to promote action and create urgency. Active words in headers are usually verbs like build, get, launch, unlock, pledge, invest and give.

Here are a few examples of effective, action-led landing page headlines.

Codecademy winning headline
Codecademy’s headline is about as close to perfect as it gets.
Lyft winning headline
Lyft doesn’t use the “Get started” CTA we’ll talk about, but that headline is a winner.
Pro tip: To maximize your conversion efforts, ensure there’s message match between your click-through ad and headline.

Your exact offering + Promise of ease = Winning subheader

Your header is an active statement, introducing your product. Your subheader is the second wave, there to support the header and give visitors a reason to continue reading. In the subheader, you tell your audience exactly what you have to offer, and highlight how incredibly easy the whole process will be.

Easy as pie

Online, all it takes is a few taps and a few clicks to make a potentially big decision, but if it’s not easy, a lot of us won’t bother doing it. That’s especially true of a landing page, which is essentially a 24/7 elevator pitch for your business.

As a visitor to your landing page, I need to know if what you’re offering is going to benefit me, and that by handing over my details, you’re going to do most of the heavy lifting for me (at least to begin with.)

In our model for the no-fail landing page copy, the relationship between header and subheader looks like this:

Header: Introduces the idea or service in an active way (inspire your audience to do something).

Subheader: Backs up the header by giving a reason for your visitor to read on.

Outbrain winning subheader
Ooo, easy setup — just what we all love to see.

This example from Outbrain might not have the prettiest header or subheader, but both illustrate exactly what we’ve been talking about. The header is active, and so is the subheader, which tells you exactly what the main benefits of using Outbrain are, along with the promise of an easy setup.

Your best offerings + worded in the form of benefit statements + appropriate sectioning = Winning body content

The bulk of your landing page copy does the same job as the header and the subheader: it presents the benefits of your product to the user, and encourages them to act.

It’s tempting to go off-piste in the body content, to talk about your values and how you donate half of your profits to charity, but hold off. You need to make sure that your product is one your audience wants first. Stick to the benefits, and expand on those.

Break up your content

You’ll probably have more than one point to make on your landing page, but even if you don’t, breaking content up with headers and bullet points increases the chances of something catching your reader’s eye. It’s the equivalent of a supermarket arranging its products into categories and shelves, rather than bundling everything together in a big bargain bin.

With your body content, just like with your subheader, focus on what you have to offer, why it’s better than the competition’s and how you’ll do most of the heavy lifting should your prospect hand over their valuable email address. Let’s take a look at how MuleSoft connects header, subheader and body content.

Mulesoft body copy

The header: In this case, the header is just what the product is, which is likely the most appropriate approach for this audience.

The subheader: The subheader — or supporting header — focuses on the main benefit of the handbook. Clearly, MuleSoft knows its audience, and is giving it to them straight.

The body: It’s still laser-focused on those main benefits, giving visitors ample opportunity to become engaged.

Pro tip: A landing page is a pitch, and like any pitch, your job is to put forward your best offerings and do your best to secure a follow-up. If you’re struggling to prioritize your offerings, consider the following:

  • What does your product do, and how does it make your prospect’s life easier?
  • What are your product’s most ground-breaking or useful features?
  • Who does your product help?
  • How easy it is to get started?
  • Who else uses your product?

Here’s a great example from Startup Weekend. The body content answers all of the main questions, with no BS:

Startup Weekend landing page copy

Active words + “I want to…” + A/B testing = Winning CTA

Since we’re talking about no-fail copy, like blueprints for you to riff from, we’ll tell you straight up that the most common call to action phrase that makes it to live landing pages, is “Get started”. That’s followed closely by anything with the word “get” in it.

Why does ‘Get started’ work?

It needs to be clear that your call to action is where the next step happens. If you want serious leads, then the call to action button is not the place to test out your funniest one-liners. Just like the header and subheader, the call to action is active, it’s job is to create momentum.

“Get started” suggests a journey, it suggests self-improvement, which is probably why it works better than “Submit” or “Subscribe.” It could also be that “Get started” works because it finishes the sentence we’re thinking when a sign-up is close: “I want to… get started.”

Pro-tip: Best practices are best practices for a reason, but don’t use a “Get” CTA just because I suggested it. Do some research, craft a sound hypothesis and A/B test your button copy for maximum conversions.
Fluidsurveys CTA copy
FluidSurveys‘s button copy is active and timely.
Cheez burger CTA copy
Cheezburger pairs tried and true button copy with another one of our favorite words: free.
blab cake CTA copy
BlabCake uses a slightly different version of the “Get” formula for their coming soon page.

Conclusion

Let’s look at all of the formulas together:

  • Action words + Product reference = Winning headline
  • Your exact offering + Promise of ease = Winning subheader
  • Your best offerings + Worded in the form of benefit statements + Appropriate sectioning = Winning body content
  • Active words + ‘I want to…’ + A/B testing = Winning call to action

What you’ve got in these formulas, is the recipe for a basic vanilla sponge — the foundations of a successful landing page. Put them together and then — like any good marketer — your job becomes testing that landing page to see what works best for your audience.

What are your favorite copywriting formulas? Share ’em in the comments!

Original article – 

Simple Recipes for No-Fail Landing Page Copy [+ Free Downloadable Worksheet]

How I Built The One Page Scroll Plugin

Scrolling effects have been around in web design for years now, and while many plugins are available to choose from, only a few have the simplicity and light weight that most developers and designers are looking for. Most plugins I’ve seen try to do too many things, which makes it difficult for designers and developers to integrate them in their projects.
Further reading on Smashing: Infinite Scrolling: Let’s Get To The Bottom Of This Get the Scrolling Right Reapplying Hick’s Law of Narrowing Decision Architecture Advanced Navigation With Two Independent Columns Takeaways From Mobile Web Behavior Not long ago, Apple introduced the iPhone 5S, which was accompanied by a presentation website on which visitors were guided down sections of a page and whose messaging was reduced to one key function per section.

Source:  

How I Built The One Page Scroll Plugin

We’re Gonna Need A Bigger API!

Everyone likes stuff that moves about on the Web, right? Remember how you cried joyful tears when you first used <marquee>? I do. I nearly sobbed all the water out of my body as I gazed upon “JAKE’S COOL WEBSITE” bobbing back and forth in uppercase serif. Of course, we’re more mature as an industry these days.
We’ve learned that users don’t want websites to look like a CSI console having a personal crisis; instead, we go for smooth transitions that enhance the experience, rather than being the experience themselves.

View original article: 

We’re Gonna Need A Bigger API!

How To Apply Macrotypography For A More Readable Web Page

Any application of typography can be divided into two arenas: micro and macro. Understanding the difference between the two is especially useful when crafting a reading experience, because it allows the designer to know when to focus on legibility and when to focus on readability.
This article focuses mostly on a few simple macrotypographic techniques—with a dash of micro—and on how to combine them all to build a more harmonious, adaptable and, most importantly, readable Web page.

Visit site – 

How To Apply Macrotypography For A More Readable Web Page

Mind Your En And Em Dashes: Typographic Etiquette

An understanding of typographic etiquette separates the master designers from the novices. A well-trained designer can tell within moments of viewing a design whether its creator knows how to work with typography. Typographic details aren’t just inside jokes among designers. They have been built up from thousands of years of written language, and applying them holds in place long-established principles that enable typography to communicate with efficiency and beauty.

Original article: 

Mind Your En And Em Dashes: Typographic Etiquette

Equal Height Column Layouts with Borders and Negative Margins in CSS

“What? Another “Equal Height Columns” article? Enough already!” If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks. It does not use images, nor extra markup, nor CSS3, nor pseudo-classes, nor Javascript, nor absolute positioning. All it uses is border and negative margin. Please note that this article will also demonstrate different construct techniques and will brush up on a few concepts.

Original post:  

Equal Height Column Layouts with Borders and Negative Margins in CSS

Make Your Own Bookmarklets With jQuery

Bookmarklets are small JavaScript-powered applications in link form. Often “one-click” tools and functions, they’re typically used to extend the functionality of the browser and to interact with Web services. They can do things like post to your WordPress or Tumblr blog, submit any selected text to Google Search, or modify a current page’s CSS… and many other things!
Further Reading on SmashingMag: Time Savers, Tools And Useful Services For Web Designers Essential jQuery Plugin Patterns Useful jQuery Function Demos For Your Projects Because they run on JavaScript (a client-side programming language), bookmarklets (sometimes called “favelets”) are supported by all major browsers on all platforms, without any additional plug-ins or software needed.

Continue reading – 

Make Your Own Bookmarklets With jQuery