What You See Is What You Get
Anyone who has watched a fast food commercial knows that what you see is not always what you get. Any burger chain commercial will show, from an exhaustive number of angles, a thick juicy patty, sitting on a soft, fluffy bun, adorned with vibrantly colored fresh slices of lettuce and tomato, yet very rarely does this lauded sandwich ever live up to the hype.
In order to avoid the type of backlash similar to that which fast food chains have seen due to their "creative" product presentation (would you like your burger with or without glued-on onions?), UI and UX designers will need to ensure that the product they present to the consumer is not similarly inhibited by false or confusing claims.
UI and UX, for those not familiar with the term, correspond to user interface and user experience respectively. These two acronyms have been getting thrown around a lot lately as the focus on human-computer interactions have become increasingly important with technology becoming ever more prevalent in our lives. It is important to note though, that while these two terms are often used in a technological context, they are still applicable to customer-product/service interactions outside of this realm. Additionally, while these two terms sound similar and are often used interchangeably, they do represent different foci within the design world. User experience, focused on how a product feels, looks to improve the amount of satisfaction a user gains from interacting with said product. User interface, on the other hand, focuses on how a product is laid out, it concentrates on the actual icons and tools that you use as you interact with the web page or program. A way to think of these two terms that can make it easier to differentiate between them is that UX is more focused on what is going on behind the scenes while UI is centered around the visual display. User Testing Blog, a helpful site with various marketing and design resources, explains the difference between these two concepts by using Google as an example. Essentially, if you were to go to Google's homepage and search for something right now, the user interface is going to be pretty simple - a logo, a search bar, a few buttons and then a corresponding search results page. Currently, the user experience design will allow people to search for something and get thousands if not millions of results in less than a second. So what would it look like if the user experience design was changed? Would it affect the way the interface looks? The buttons, the search bar? No, it would instead affect the way the user experienced the search service. Changing the user experience could potentially alter the time it took to return search results, perhaps taking much longer to do so. It could change the accuracy of results or any other number of things that would influence the way the consumer used the product.
UI and UX are important concepts to understand because they greatly affect the ways in which consumers interact with businesses. Website landing pages, in particular, are one example of how UI and UX contribute to the success or detriment of a company. Landing pages, as the initial point of contact for your visitor, are a critical touch point that will help to hopefully move them further down the marketing funnel. Landing pages are reached after a user has clicked on some type of ad, whether that be a social media post or through a search engine generated result. CTAs are then used within the landing pages to encourage lead generation and can ultimately lead to the conversion of visitors into customers. The below image, taken from Hubspot, an inbound marketing and sales software company, demonstrates both the marketing funnel and designates the landing page as a part of the conversion stage.
An example of this three step process may start with a CTA in the form of a side bar box that reads, "Download your 10-step guide to a more organized life!". Once clicked, this would lead to a landing page where the customer is then given the opportunity to download the promoted guide in exchange for some volunteered information. The amount of information asked for on a landing page can vary widely but should roughly equate to the value the content is providing. In this example, it would probably make the most sense to simply ask for a name and an email. Once a user has submitted their information through the landing page, they should be met with a 'thank you' page which can include further instructions, suggestions, as well as opportunities for the user to share the content socially should this be appropriate. This sequence represents a logical progression a user will follow when interacting with a business and provides companies with a list of leads which they can then analyze and target in order to turn them into customers.
Amongst these three steps (the CTA, the landing page and the thank you page) UI and UX are in constant use to encourage a greater number of clicks and conversions. Let's look at a real life example and analyze it according to a series of best practices outlined by Hubspot Academy, to see how user interface and user experience influence the way a potential customer would interact with a company. If you would like to see some examples of particularly elegant and effective landing pages, take a look at H. Bloom, a flower subscription company, and Velaro, a provider of live-chat software.
For our example, we will be looking at This American Girl, a travel and lifestyle blog run by Camille Willemain who left her corporate job four years ago to pursue a life of adventure as a permanent globetrotter. When arriving on her landing page, you are met with an immediate and obvious call to action that asks for your name and email in return for the supplication of a "10-Step to Freedom" E-Course. The CTA is action-oriented, "Sign Up!", specific, and attention-grabbing as it lies at the top of the page in an eye-catching but complimentary color. With the addition of a reiteration of the call-to-action at the bottom of the page, Camille is ensuring her viewers do not pass over it in a bout of banner blindness.
As a landing page, it presents a clear, action-oriented headline that is succinct and asks for an appropriate amount of user information relative to the value of the supplied content. One way that it could be improved upon as a landing page, is with the addition of social sharing icons that would allow users to share the free eCourse with their peers.
Finally, after submitting a name and email, users are met with a brief thank you message that gives further instruction on how to obtain their free eCourse. As the message leaves you on what is essentially the landing page, this thank you message would represent an inline thank you. Whenever possible, it is preferable to create a thank you page where you will be better able to supply information, other calls-to-action and social sharing options. In this case, the instructions are somewhat vague and it would've been beneficial to supply social sharing icons so that the free eCourse could be proliferated amongst the user's friends, coworkers and family.
While there are a number of ways to utilize UI and UX to create effective landing pages, their uses will vary depending on the type of organization and the kind of goals that have been set by that company. It is important that UI and UX designers ensure that the product they are presenting to the customer is devoid of any misleading or confusing content. Unlike fast food commercials, landing pages need to present to the user a display that makes it abundantly clear; what you see is what you get.