The ultimate end goal for every single visitor to your website is to turn them into a customer or a recurring visitor. The problem is that turning visitors into regulars can be tricky. Really tricky. There is, however, an easier way to convert visitors without wasting your time or theirs—and it comes in an unexpected form. Pop-up form, to be exact. Simply by using well placed popup forms, you can boost your email subscription rate by 317% or more. With this in mind, we’re going to take a look at our top seven pop-up recommendations and discover how they’ll help…
Landing page optimization doesn’t happen overnight. That’s why marketers get frustrated — and often give up. If you want better landing pages, focus on collecting data. You should design your landing pages based on what you already know about your audience, but don’t stop there — make sure you collect even more information as more people visit your website. Converting that data into informed decisions about your marketing funnel can produce more leads and sales. Today, I’m going to teach you my best landing page optimization tips and tricks so you can attract more prospects and convert more customers. If…
Full-day workshop • June 28th Being able to sketch is like speaking an additional language that enables you to structure and express your thoughts and ideas more clearly, quickly and in a engaging way. For anyone working in UX, design, marketing and product development in general, sketching is a valuable technique to feel comfortable with.
Thinking through complex problems on your own, spontaneously pitching an idea at the whiteboard, bringing a user scenario to life in a storyboard or creating sketchnotes during a research interview: the ability to sketch is as versatile and useful as the ability to write.
Once Upon A Time: Using Story Structure For Better Engagement
Stories form the connective tissue of our lives. They’re our experiences, our memories, and our entertainment. They have rhythms and structures that keep us engaged. In this article, we’ll look at how those same rhythms and structures can help us enrich and enhance the user experience.
In his seminal work Hero With A Thousand Faces, Joseph Campbell identified a structure that rings true across a wide variety of stories. He called this “The Hero’s Journey,” but his book explaining it was 300+ pages so we’ll use a simplified version of Campbell’s work or a jazzified version of the plot structure you probably learned about in elementary school:
The ordinary world/exposition is where our hero/protagonist/person/thing/main character starts. It’s the every day, the safe, the boring, the life the hero already knows.
The inciting incident is the event or thing that pulls or (more often) pushes the hero into the story. It’s what gets them involved in the story whether they want to be or not.
In the rising action/preparation phase, the hero prepares (sometimes unknowingly) for the ordeal/climax which is when they go up against the villain (and prevail!).
After the hero prevails against the villain, they must return to their ordinary world and bring back the new knowledge and/or mythical object they got from/for defeating the villain.
Finally, in the Resolution, we tie up all the loose ends and throw a dance party.
We can apply this same structure to the experience of the user or — as I like to call it — the “user journey.”
Where the user starts (their every day).
They have a problem they need solved.
They’ve found your product/service/website and they think it might work to solve their problem, but they need to decide that this is the product/service/website will solve their problem. So in this step they gather facts and figures and feelings to determine if this thing will work. It could be deciding if the type of video game news covered on this site is the kind of news they want to consume or deciding whether this type of pen will solve their writing needs or whether the graphic design prowess of this agency can make their new website super awesome.
The fight to make a decision about purchasing that pen or adding that news site to your regularly checked sites or contacting that agency for a quote.
The Road Back
Decision made, the road back is about moving forward with that purchase, regular reading, or requesting the quote.
Where they apply your product/service/website to their problem and it is mightily solved.
If we consider this structure as we look at user interactions, there are lots of ways we can put ourselves in the user’s shoes and optimize their experience, providing support (and sometimes a good shove) exactly when they need it.
Here are some techniques. Some apply to just one part of the User Journey while some apply to several parts at once:
Journey With Your Users
Stories take time. Movies aren’t done in two minutes; they take two hours to watch and absorb. They are a journey.
If you always only ever shout “BUY! BUY! BUY!” you may make a few quick sales, but you won’t encourage long-term loyalty. Journey with your users, and they’ll count on you when they have a problem you can solve.
InVision’s newsletter journeys with you. In this recent newsletter, they sent an article about Questlove and what we can learn from him concerning creativity. If you click through, other than the URL, the word “InVision” does not appear on the page. They’re not pushing the sale, but providing relevant, interesting content to the main audience of people who use their products. I haven’t yet been in the market for their services, but if/when I am, there won’t be much of an Ordeal or fight for approval. They’ve proven their worth as a traveling companion. They’re someone I can count on.
Journeying with your users can take many forms, only one of which is content marketing. You could also build training programs that help them move from beginner to expert in using your app or site. You could add high touch parts to your sales process or specific technical support that will help you come alongside your user and their needs. In contexts of quick visits to a website you might use visuals or wording that’s down-to-earth, warm, welcoming, and feels personable to your main audience. You want to show the user they can count on you when they have a problem.
Give ‘Em A Shove
Users need an inciting incident to push them into the user journey, often more than one push. They have a lot going on in their lives. Maybe they’re working on a big project or are on vacation or their kid played frisbee with their laptop. They may have lost or never opened your first email. So don’t hesitate to send them a follow-up. Show them the difference between life without your product or service and life with it. Heroes are pushed into a story because their old life, their ordinary world, is no longer tenable given the knowledge or circumstances they now have.
Nick Stephenson helps authors sell more books (and uses the hero’s journey to think through his websites and marketing). Last fall he sent out a friendly reminder about a webinar he was doing. He gets straight to the point reminding us about his webinar, but provides value by giving us a way to ask questions and voice concerns. He also lets us know that this is a limited time offer, if we want the new life his webinar can bring we’ve got to step into the story before it’s too late.
Give your users more than one opportunity to buy your product. That doesn’t mean shove it down their throat every chance you get, but follow up and follow through will do wonders for your bottom line and help you continue to build trust. Many heroes need a push to get them into the story. Your users may need a shove or well-placed follow up email or blaring call to action too.
Give Out Magic Swords
By now you know your users will face an ordeal. So why not pass out magic swords, tools that will help them slay the ordeal easily?
Whenever I have tried to use Amazon’s Web Services, I’ve always been overwhelmed by the choices and the number of steps needed to get something to work. A one button solution it is not.
But on their homepage, they hand me a magic sword to help me slay my dragon of fear.
They use a 1-2-3 graphic to emphasize ease. With the gradient, they also subtly show the change from where you started (1) to where you’ll end (3) just like what a character does in a story. My discussion above could make this ring hollow, but I believe they do two things that prevent that.
First, number two offers lots of 10-minute tutorials for “multiple use cases” There seems to be meat there, not a fluffy tutorial that won’t apply to your situation. Ten minutes isn’t long, but can show something substantially and “multiple use cases” hints that one of these may well apply to your situation.
Second, number three is not “You’ll be done.” It’s “Start building with AWS.” You’ll be up and running in as easy as 1, 2, 3. At step 3 you’ll be ready to bring your awesome to their platform. The building is what I know and can pwn. Get me past the crazy setup and I’m good.
Find out what your user’s ordeal is. Is it that a competitor has a lower price? Or they’re scared of the time and expertise it’ll take to get your solution to work? Whatever it is, develop resources that will help them say Yes to you. If the price is a factor, provide information on the value they get or how you take care of all the work or show them it will cost them more, in the long run, to go with a different solution.
No One is Average
So many stories are about someone specific because we can identify with them. Ever sat through a movie with a bland, “everyman” character? Not if you could help it and definitely not a second time. If you sell to the average person, you’ll be selling to no one. No one believes themselves to be average.
Coke’s recent “Share a Coke” campaign used this brilliantly. First, they printed a wide variety of names on their products. This could have backfired.
My name isn’t Natasha, Sandy or Maurice. But it wasn’t “Buy a Coke,” it was “Share a Coke.” And I know a Natasha, a Sandy, and a Maurice. I could buy it for those friends for the novelty of it or buy my name if I found it ( “John” is so uncommon in the U.S. it’s hard to find anything that has my name on it besides unidentified men and commodes.)
So often we target an average user to broaden the appeal for a product/service/website, and to an extent, this is a good thing, but when we get overly broad, we risk interesting no one.
You Ain’t The Protagonist
You are not the protagonist of your website. You are a guide, a map, a directional sign. You are Obi-Wan Kenobi on Luke’s journey to understand the force. That’s because the story of your product is not your story, this isn’t the Clone Wars (I disavow Episodes I-III), it’s your user’s story, it’s A New Hope. Your users are the ones who should take the journey. First, they had a big hairy problem. They found your product or service that solved that big hairy problem. There was much rejoicing, but if you want them to buy you aren’t the hero that saves the day, you’re the teacher who enables them to save their day. (I am indebted to Donald Miller and his excellent “Story Brand” podcast for driving this point home for me.)
Zaxby’s focuses on how they’ll help you with messages like “Cure your craving” and “Bring some FLAVOR to your next Event!” The emphasis on “flavor” and “your” is borne out in the design and helps to communicate what they do and how they will help you solve your problem. But “you”, the user, is the hero, because you’re the one bringing it to the event. You will get the high fives from colleagues for bringing the flavor. Zaxby’s helps you get that victory.
Furthermore, we’re all self-centered, some more than others, and frankly, users don’t care about you unless it helps them. They only care about the awards you’ve won if it helps them get the best product or service they can. They are not independently happy for you.
At a recent marketers event I attended, the social media managers for a hospital said one of their most shared articles was a piece about the number of their doctors who were considered the top doctors in the region by an independent ranking. People rarely shared the hospital’s successes before, but they shared this article like crazy. I believe it’s because the user could say, “I’m so great at choosing doctors. I picked one of the best in the region!” Rather than “look at the hospital” users were saying “look at me!” Whenever you can make your success their success you’ll continue your success.
Celebrate Their Win
Similar to above, their success is your success. Celebrate their success and they’ll thank you for it.
Putting together any email campaign is arduous. There are a thousand things to do and it takes time and effort to get them right. Once I’ve completed that arduous journey, I never want to see another email again. But MailChimp turns that around. They have this tiny animation where their monkey mascot, Freddie, gives you the rock on sign. It’s short, delightful, and ignorable if you want to. And that little celebration animation energizes me to grab the giant email ball of horrors and run for the end zone yet again. Exactly what Mailchimp wants me to do.
So celebrate your user’s victories as if they were your own. When they succeed at using your product or get through your tutorial or you deliver their website, throw a dance party and make them feel awesome.
The Purchase Is Not The Finish Line
The end of one story is often the beginning of another. If we get the client to buy and then drop off the face of the Earth that client won’t be back. I’ve seen this with a lot of web agencies that excel in the sales game, but when the real work of building the website happens, they pass you off to an unresponsive project manager.
Squarespace handles this transition well with a “We got you” email. You click purchase, and they send you an email detailing their 24/7 support and fast response times. You also get the smiling faces of five people who may or may not, have or still work there. And it doesn’t matter if they work there or never did. This email tells the user “We’ve got you, we understand, and we will make sure you succeed.”
This harkens all the way back to journeying with your user. Would you want to travel with the guy who leaves as soon as you got him past the hard part? No, stick with your users and they’ll stick with you.
We are storytelling animals. Story structure resonates with the rhythms of our lives. It provides a framework for looking at user experience and can help you understand their point of view at different points in the process. It also helps you tweak it such that it’s a satisfying experience for you and your users.
You got to the end of this article. Allow me to celebrate your success with a dance party.
Customer acquisition is all about convincing people to buy your products or service. That’s it. But it’s more complicated than you might think. You have to understand your customers’ buyers journeys and how they make the decision to buy (or to not buy). You might have heard that old adage about how much less expensive it is to retain customers than to acquire them. In fact, it’s about five times less expensive. That statistic sounds powerful, but it leaves an important element out of the equation. To retain customers, you first must acquire them. If you already have 10 million…
The power of a word of mouth is incredible and it should never be underestimated. People refer other users’ recommendations way too often to neglect them. That is where the power of influencer content comes into play. Due to the massive reach and engagement, the opinion of a thought leader helps build brand awareness and increase conversion rates for your brand. The outcome however will depend on how well you formulate your influencer marketing. Working with the niche influencers is not only a good way to promote your product, but also to create quality content. Focus on long-term benefits, and…
There are only a few instances when I wish I could travel back in time. One is when I’m reading the kid’s menu. One is when I stumble upon Bill and Ted’s Excellent Adventure on TBS. And one is after I’ve launched a new product or campaign.
You and I may share that last one.
Though we typically know the T’s are crossed and I’s are dotted, it’s the pesky unknowns us marketers wrestle with before a new product launch that keep us up at night. Things like: Is the product’s name right? Is the copy clear, but boring? Clever, but convoluted? Is the value as obvious as it should be?
Beyond messaging, most often, it comes down to whether your product’s positioning is right from the start; whether you set the product up in the right conditions and market category in the first place.
We all know the market is more saturated than ever. But what if, instead of fighting it, we used that momentum to our advantage?
April Dunford is the Founder of Rocket Launch Marketing, the former VP of Marketing for a series of high-growth startups and previous executive at big-wig companies like IBM and Nortel. She’s also a speaker, author and in-demand consultant specializing in product positioning. Advising companies on go-to-market strategy and messaging, she ensures they’re going after the right category and communicating their offering in a way that grabs prospects’ attention and makes its value crystal clear.
Basically, April knows her stuff. And she’ll be bringing her smarts to the CTAConf stage in August! But we have the patience of a toddler waiting for an iPad to charge, so we peppered her with some burning questions in anticipation of her talk. She was the top-rated speaker at last year’s conference, so we know this year’s gonna be good. You can enjoy a little time traveling to 2017 via the clip below:
Check out our Q&A with April below and keep your eyes peeled for the exclusive-to-everyone-who-reads-this-post discount code to see her in person.
First thing’s first: What exactly is product positioning and how does it differ from brand positioning?
April: You might say “Positioning” has its own positioning problem! It’s such a misunderstood concept. For some folks it’s mainly a messaging exercise, while others associate it very closely with branding. But positioning is much, much broader than either of those things.
Product positioning describes the specific market you intend to win and why you are uniquely qualified to win it. It’s the underpinning of your go-to-market strategy and impacts everything from marketing to sales, to customer success and the product itself.
What’s the first thing a client asks when you sit down with them?
April: Most CEOs don’t know it’s a product positioning problem they have. They know their customers have a hard time understanding what their product is all about and why they should care. That confusion results in long sales cycles, low close rates and poor marketing campaign performance.
A lot of the work I do is centered around teaching folks how to create context for their products by focusing on making value obvious to customers. Positioning as a concept isn’t new but, until now, we’ve all been pretty terrible at actually doing the work it requires. I teach companies a process for finding and delivering the best position for their products.
What’s the most common mistake you’ve seen businesses make with their go-to-market strategy?
April: Hands down, the most common mistake I see is companies trying to market to a set of customers that is much too broad. The reasoning is that, by going after a massive market, it will be easier to claim a small piece of it.
In reality, the opposite is true. Broad targeting puts your offering in direct competition with established market leaders that can both out-market and out-sell you. Beyond that, it leads to diluted messaging that waters down your best features and differentiators.
The easier—and far more effective thing to do—is target a smaller slice of customers who are highly suited to your product’s key features and the distinct value they can deliver.
Customers who most acutely feel the pain you address will be the most excited about your solution to that pain. They’ll pay you more, close faster and love your product so much they’ll end up marketing it for you. (Editor’s note: AKA the Holy Grail of marketing.)
Once you’ve established yourself with these highly suitable customers, you can build on your strengths and start to expand your targets to larger markets.
Can you tell us about the most challenging product positioning case you’ve worked on?
April: At IBM, I led the launch of a family of products that demanded an entirely new market category built from scratch. We had to convince customers, experts and analysts that certain market forces existed and would inevitably redraw the lines around existing market categories. On top of that, I had to convince them that IBM was the only company capable of drawing those lines.
There was also a catch: The products we had in that family weren’t particularly innovative on their own, at least not at the beginning. So the story itself hinged on convincing people that all of this revolutionary change was going to be sparked by the innovative combination of some pretty ho-hum products.
We managed to pull it off through sheer guts, a sprinkling of good luck and the deep marketing talent of my team at the time. But mainly, guts.
Your upcoming talk at CTAConf is about how to turn “marketing headwinds into tailwinds.” What do you mean by that?
April: In any market category, you’ll encounter extremely powerful forces that can either work for you or against you.
We often position our products in markets with strong competitors who are already perceived as leaders. Like swimming upstream, or fighting headwinds, we have to work extra hard to win in that environment.
Luckily, most products can be positioned in many different markets that offer greater chances of success. We just have to find ones where that inherent force is pushing us forward, like a tailwind, instead of pushing back on us.
In my talk, I’m going to outline exactly how you can use existing market forces to your advantage and grow revenue faster.
Want to hear this talk at CTAConf 2018? Get 10% off all Early Bird tickets ($80 off for General Attendees) by using the code “AprilCTAConf2018” at checkout.
What should marketers consider, before anything else, when launching a new product?
April: The success of a launch depends on how well you understand three things:
The problem your product solves and the competition it faces.
The true value your product delivers for customers.
Which types of customers care the most about that value and, most importantly, why?
If you’ve got these down, you’ll know exactly who you need to reach, the channels you need to use to reach those people and the value proposition you need to communicate.
What should marketers be doing differently now in terms of product positioning vs. five years ago?
April: We should start doing it! Most companies don’t deliberately position their product. They assume a default positioning based on how they first thought about it.
For example, say you’ve built a new email client. But after you got it into the market, you got some feedback, added or removed features and continued to iterate on it. Now you may have a solution that’s best positioned as a “group chat” or “social network” or “team collaboration tool” instead of focusing on email capabilities.
The market frame of reference you choose will completely change the way customers perceive your product and their expectations around pricing, features, support and your competitors.
Because the markets are more crowded, more competitive and shifting faster than they ever have before, we can’t get away with ignoring product positioning if we want our products to be successful.
Get every actionable detail of April’s positioning framework and go-to-market guide in her upcoming talk at Call to Action Conference, this August 27-29. Use the code “AprilCTAConf2018” at checkout for 10% off single, group and customer rates (that’s on top of the Early Bird discount, ending May 31st)! Want more reasons to go? Click here for a bunch of ‘em.
Building Mobile Apps Using React Native And WordPress
As web developers, you might have thought that mobile app development calls for a fresh learning curve with another programming language. Perhaps Java and Swift need to be added to your skill set to hit the ground running with both iOS and Android, and that might bog you down.
But this article has you in for a surprise! We will look at building an e-commerce application for iOS and Android using the WooCommerce platform as our backend. This would be an ideal starting point for anyone willing to get into native cross-platform development.
A Brief History Of Cross-Platform Development
It’s 2011, and we see the beginning of hybrid mobile app development. Frameworks like Apache Cordova, PhoneGap, and Ionic Framework slowly emerge. Everything looks good, and web developers are eagerly coding away mobile apps with their existing knowledge.
However, mobile apps still looked like mobile versions of websites. No native designs like Android’s material design or iOS’s flat look. Navigation worked similar to the web and transitions were not buttery smooth. Users were not satisfied with apps built using the hybrid approach and dreamt of the native experience.
Furthermore, changes done to the code during development are loaded onto the testing devices almost instantly! This used to take several minutes when we had native development through other approaches. Developers are able to enjoy the instant feedback they used to love with web development.
React developers are more than happy to be able to use existing patterns they have followed into a new platform altogether. In fact, they are targeting two more platforms with what they already know very well.
This is all good for front-end development. But what choices do we have for back-end technology? Do we still have to learn a new language or framework?
The WordPress REST API
In late 2016, WordPress released the much awaited REST API to its core, and opened the doors for solutions with decoupled backends.
So, if you already have a WordPress and WooCommerce website and wish to retain exactly the same offerings and user profiles across your website and native app, this article is for you!
Assumptions Made In This Article
I will walk you through using your WordPress skill to build a mobile app with a WooCommerce store using React Native. The article assumes:
You are familiar with the different WordPress APIs, at least at a beginner level.
You are familiar with the basics of React.
You have a WordPress development server ready. I use Ubuntu with Apache.
You have an Android or an iOS device to test with Expo.
What We Will Build In This Tutorial
The project we are going to build through this article is a fashion store app. The app will have the following functionalities:
Shop page listing all products,
Single product page with details of the selected item,
‘Add to cart’ feature,
‘Show items in cart’ feature,
‘Remove item from cart’ feature.
This article aims to inspire you to use this project as a starting point to build complex mobile apps using React Native.
We will begin building the app as per the official React Native documentation. Having installed Node on your development environment, open up the command prompt and type in the following command to install the Create React Native App globally.
This will create a new React Native project which we can test with Expo.
Next, we will need to install the Expo app on our mobile device which we want to test. It is available for both iOS and Android.
On having installed the Expo app, we can run npm start on our development machine.
After that, you can scan the QR code through the Expo app or enter the given URL in the app’s search bar. This will run the basic ‘Hello World’ app in the mobile. We can now edit App.js to make instant changes to the app running on the phone.
Alternatively, you can run the app on an emulator. But for brevity and accuracy, we will cover running it on an actual device.
Next, let’s install all the required packages for the app using this command:
Since this article is about creating a React Native app, we will not go into details about creating a WordPress site. Please refer to this article on how to install WordPress on Ubuntu. As WooCommerce REST API requires HTTPS, please make sure it is set up using Let’s Encrypt. Please refer to this article for a how-to guide.
We are not creating a WordPress installation on localhost since we will be running the app on a mobile device, and also since HTTPS is needed.
Once WordPress and HTTPS are successfully set up, we can install the WooCommerce plugin on the site.
After installing and activating the plugin, continue with the WooCommerce store setup by following the wizard. After the wizard is complete, click on ‘Return to dashboard.’
You will be greeted by another prompt.
Click on ‘Let’s go‘ to ‘Add example products’. This will save us the time to create our own products to display in the app.
To load our store’s products from the WooCommerce REST API, we need the relevant keys in place inside our app. For this purpose, we can have a constans.js file.
First create a folder called ‘src’ and create subfolders inside as follows:
Now, let’s generate the keys for WooCommerce. In the WordPress dashboard, navigate to WooCommerce → Settings → API → Keys/Apps and click on ‘Add Key.’
Next create a Read Only key with name React Native. Copy over the Consumer Key and Consumer Secret to the constants.js file as follows:
React Navigation is a community solution to navigating between the different screens and is a standalone library. It allows developers to set up the screens of the React Native app with just a few lines of code.
There are different navigation methods within React Navigation:
For our Application we will use a combination of StackNavigation and DrawerNavigation to navigate between the different screens. StackNavigation is similar to how browser history works on the web. We are using this since it provides an interface for the header and the header navigation icons. It has push and pop similar to stacks in data structures. Push means we add a new screen to the top of the Navigation Stack. Pop removes a screen from the stack.
The code shows that the StackNavigation, in fact, houses the DrawerNavigation within itself. It also takes properties for the header style and header buttons. We are placing the navigation drawer button to the left and the shopping cart button to the right. The drawer button switches the drawer on and off whereas the cart button takes the user to the shopping cart screen.
DrawerNavigation on the other hands provides for the side drawer which will allow us to navigate between Home, Shop, and Cart. The DrawerNavigator lists the different screens that the user can visit, namely Home page, Products page, Product page, and Cart page. It also has a property which will take the Drawer container: the sliding menu which opens up when clicking the hamburger menu.
This page contains details of a selected product. It shows the user the name, price, and description of the product. It also has the ‘Add to cart’ function.
This screen shows the list of items in the cart. The action has the functions getCart, addToCart, and removeFromCart. The reducer handles the actions likewise. Identification of actions is done through actionTypes — constants which describe the action that are stored in a separate file.
As you can see, we are using a FlatList to iterate through the cart items. It takes in an array and creates a list of items to be displayed on the screen.
You can configure information about the app such as name and icon in the app.json file. The app can be published after npm installing exp.
To sum up:
We now have a decent e-commerce application with React Native;
Expo can be used to run the project on a smartphone;
Existing backend technologies such as WordPress can be used;
Redux can be used for managing the state of the entire app;
Web developers, especially React developers can leverage this knowledge to build bigger apps.
For the full application, you can visit my project on Github and clone it. Feel free to fork it and improve it further. As an exercise, you can continue building more features into the project such as:
Storing the cart data in AsyncStorage so that closing the app does not clear the cart.
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.
“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).”
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.
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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.”
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.
“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.