Why UI and UX Design Mean Nothing Without Great Content – And Why You Want It To Be This Way

Why UI and UX Design Mean Nothing Without Great Content - And Why You Want It To Be This Way

Do you know how big the difference between a million and a billion is? If you’re like most people, you’ll say: Sure, it’s a thousand. The problem is, if you say “a thousand” you’re thinking about the difference between $1 and $1000. That’s huge, but we are confronted with these numbers so often in our daily lives, that we have forgotten how far they are apart.

A new iPhone 6 Plus with 128 GB costs that much, so nothing special right?

Wrong. Just to give you an idea of how big the difference between a million and a billion actually is: Counting from right now, a million seconds ago equals 12 days ago. Also counting from right now, a billion seconds ago equals 32 years ago. Crazy, right?

So if I now tell you that it’s the same difference between UI and UX applied to a bad piece of content vs. a great piece of content, you get an idea of how much impact content has.

(Note: Make sure to read all the way through to get 6 UI and UX tips and tricks to make great content stand out even more.)

UI, UX and Great Content

UX and UI – What’s What?

Avid readers of onextrapixel.com already know the difference between UI and UX.

UI (User interface) is focused on the layout. It is the job of a UI designer to make a page easy to navigate, clutter-free, beautifully designed and intuitive to use.

For example:

WordPress Flat Theme

Check out this WordPress theme demo. Great design! Not much text, big images, easy to navigate with the buttons and the menu bar and I can intuitively scroll down.

UX (User experience) on the other hand, is focused on how the product feels. The UX designer must make sure the flow of events is logical, what elements should be shown when, and ensure that the user feels AWESOME during the experience. Emotions, responsiveness, practicality and efficiency are all part of that.

For example:

Joseph Payton

This about me page creates a great UX. The bird actually tweets, the smoke out of the coffee mug is animated, and all the buttons are responsive. The UI is good too, the page clearly focuses on what’s important.

Now that’s all sunshine and rainbows, but look at what happens when you switch to the second image of the slider in the first example:

About Me Page

They only have 3 headlines in the entire demo, and there’s a spelling error in one?! Ugh.

The weird video of a couple burying the placenta of their miscarriage on the next slide doesn’t help either. Not only does it have nothing to do with the topic (web design), it’s also a weird topic in general, which will make people bounce instantly, because they are grossed out by it.

Video Page

Consider the about page again. UI and UX are very good, but if you click on “my work” and you hate his t-shirt designs, would you hire the guy? Hell no!

See where I’m going with this?

The Good News: Content Matters Most

No matter how great your UI design is, and no matter how good the UX is you create, without great content, you will never make that factor one thousand difference – not for your customer and definitely not for your bank account.

And guess what, this is GREAT NEWS! You WANT great content to be a huge part of success. Why?

UI and UX are two different things, but Helga Moreno also pointed out a few similarities in her article, all of which cause problems:

Similarity #1: They can both be applied to ANY product.

This means ANYONE can come up with a great UI and UX, for ANY type of product. And if not they can pay someone to come up with it.

Your content is what makes you unique. It makes you stand out.

I bet you can find 5 pages that have UI and UX, which is similar to the one on your site, within 10 minutes. But find someone with the exact same content as yours? I don’t think so.

Similarity #2: They both deal with design-related problems.

Imagine all books in the world had the same content. All publishers could change was the design. Terrible. Don’t get me wrong, I love the Lord of the Rings. But would you want to read it over and over again? Even if the font and cover design were different, and you could listen to it as audio, or watch the movie?

Me neither.

The content is where you get a chance to shine, to make yourself different from others, to be better than others. And by a mile! To get ahead in terms of design is difficult. To get ahead in terms of content is comparatively easy.

Similarity #3: They both try to create the maximum amount of comfort for the user.

But why is that bad? Comfort’s good, right?

Yes and no. You do want your users to be comfortable navigating your site. What you don’t want is them becoming so comfortable, that they turn super passive and don’t take any action when they are supposed to.

Sometimes you need your users to be gripping the edge of their seat, because they can’t wait to take action and interact with you, whether it be buying something, downloading free content, or asking a question.

How do you do that? Once again: great content.

Content Gone Wrong and How You Can Do Better – An Example

Take this landing page for example, which is for a shared working space in NYC:

Fueled Co-Working Space

The UI is great. It’s a one-pager, super sleek and responsive. The UX is alright. The page takes a while to load, and every time I scroll down I have to wait and then it moves a whole section instead of seamlessly. I don’t have full scrolling control, so that could be better.

Actually, it couldn’t. Because the slow, dragging scroll perfectly illustrates the point I’m trying to make.

When I navigate this page I get super lazy and passive.

I take in the information, but it’s literally me going: “Uh-huh…yup…uhhm, okay.”

And sure enough, when that inevitable call-to-action (CTA) comes, guess how badly I want to throw $2400 down their throat to get three months worth of workspace?

Never. Gonna. Happen.

But I said it, the UI is great and the UX is fairly good too, so what went wrong?

The content. Big time

Let me show you exactly how much their content sucks and what they could have done instead.

Section #1: The header. “It’s not an office, it’s a collective.” Already sounds super douchy, if you ask me, but that might be just me. Why not focus on the collective part in a less negative way? For example a simple: “Work. Together.” would have done more for me.

Section #2:

Fueled - Video

The Fueled Collective is a shared working space in Manhattan. You can stop reading, that’s all the info you’re gonna get. Plush leather couches, ice cream, ping pong, a snack bar. What is this, a candy factory?

What I want to know about a shared workspace is: How much space do they actually have? Does it have opening hours or is it open 24/7? Do I get one desk, two desks, or just a chair? Where exactly is it? Is electricity included? And, most importantly: Is there gonna be wifi?

The video doesn’t help either, there’s not much there, except for a super fake guy giving another super fake guy a super fake thumbs up. When another guy says: “The whole point of, like, a collaborative workspace is, so that, you’re not alone.”, my brain hits the snooze button.

Put up real testimonials, let people tell stories of their big breakthroughs, revenue numbers, how they flew across the hallway with that hoverboard they developed.

I want you to tell me why my startup is inevitably going to be a success, if I choose to do my work there.

I don’t care about the ice cream.

Section #3:

Fueled - Office Space

0 takeaways here as well. Now I know it’s in SoHo, great. Then the entire paragraph talks about the neighborhood of the workspace. I don’t care about the neighborhood. I am running a startup, I have neither the time, nor the money for “Manhattan’s poshest restaurants” or “hippest nightlife”.

Tell me what’s inside already!

If you must talk about SoHo, at least tell me why it’s a great place for startups. I already know I can leave a lot of money there, talk about how I can MAKE some.

I almost missed that there are several slides here, but there are and there is an address somewhere in there. Oh, and there is wifi. Makes it a little better, but there could be a lot less blabla and a lot more useful information here.

Section #4:

Fueled - What You Get

So, what do I get? I get bored. Popcorn, candy bars, ice cream, coffee. I’m telling you, this is a candy factory in disguise. Speechless.

Obviously information such as: You will get x amount of desks/space/electricity/wifi/mentoring/hours belongs here.

Section #5:

Fueled - Desk Costs

The inevitable call to action. When you ask me to spend $2400 you better exactly explain to me what I’m getting for my money. I wanna have a list of things, detailing exactly how the price comes about and what’s included – not a picture puzzle with a huge price tag.

Ah, so it is open 24 hours. Still.

Become part of something special? I’d really rather not. At this point, I honestly believe a CTA referring back to the ice cream would have done a better job than this.

But let’s suppose they had done a better job and I can’t wait to click their CTA. This skips section 6, which is just a list of current occupants, and takes me right to…

Section #6:

Fueled - Join

Now I’m supposed to take action. After I just wanted, but couldn’t, you’re telling me I have to email you to get in touch? I can’t just book it?

Now that’s too much discomfort right there. They should have made it an opt-in form, so I can just enter my email and have the info sent to me.

You can see that the best UI and UX aren’t worth anything, as long as you don’t have great content.

(Note: I’ve created a PDF of this post, so you can take this example as a guide and apply it on landing pages yourself, which you can download at the end of this post.)

Why Content Matters More Than UI and UX Combined

Because content is substantial. It’s real value. It’s what’s left when you take away all the excess, the shiny designs and fancy animations.

Great content can come on a crumpled piece of paper, and still be of great value to its reader.

And you have to give your users lots of it. You have to give away way more value than you receive.

As Derek Halpern put it: “The right way to sell is to give away the house…and sell the backyard.”

In the end people don’t care about cool animations and free candy bars, they want you to help them solve their problem. Much more than they want a fancy UI or UX.

Look at this:

Efficient Life Skills

Is the UI of this page great? Not really. It’s not terrible, the share buttons are awesome, but I could care less about the red and green color combination in the smart bar or the oddly pre-marked tweets (no offense, I love SumoMe, it’s a great plugin and everyone should use it!).

But look at the shares! Almost 700,000 shares?! That’s insane!

Guess how many of those 700,000 cared about the font size or the color selection?

0.

Guess how many cared about how they can make their sandwiches for a whole week in 15 minutes?

All of them.

The truth is: The greater your content, the more you can sleep on UI and UX, and still get away with it.

Here’s another example:

James Clear

Try to guess how much traffic this page converts to email subscribers. 80%.

What?! It’s lousy in terms of design and there’s no great content either, so how did this page get over 2400 email signups?

It’s because the traffic for this page comes from here:

Life Hacker

James Clear had his amazing article about deliberate practice published on Lifehacker. It has great (free) productivity advice. At the end of the article he simply put a byline with the link to his newsletter signup page.

It doesn’t matter that the UI of the page is terrible, or that the UX sends the reader to a separate page asking for email.

If you have read the article, you know how much value James provides, so all you want to do is sign up to his email list, no matter the design of the page.

How You Can Create Great Content

Okay Niklas, we get it, create great content, provide real value, and you’ll ace Marketing 101.

But how? Me telling you great content is important is easy, but I want to help you actually create some, so here are a few tips and resources to get started:

  1. Find already popular content, update it, expand it, rewrite it, redesign it. You must improve it. Brian Dean has written a great guide on how to do this.
  2. Create bonus content you can offer. Bryan Harris shows you 11 ideas how you can come up with a content bonus in no time!
  3. Engineer your content to go viral. Again, this is no substitute for providing great value, but it helps to know a few tricks you can use to optimize your content for shares. BuzzSumo teamed up with Noah Kagan to analyze 100 million articles. Use what they learned to build great content!
  4. Make sure your content also drives traffic. Peep Laja from ConversionXL illustrates how he strategically crafted his content to grow his blog to 100,000 visitors in less than a year.
  5. As Socrates put it: know thyself. To provide value, you must first know where you can and where you can’t help others. James Altucher once turned down $5000 for grabbing coffee with a guy, because he couldn’t give him what he really needed.

Wow, that was a lot. A quick recap:

A good UI is important to help your user navigate your site and not get confused.

A good UX is important to make your user feel awesome and excited.

But none of that matters without great content. The content is what has the biggest impact by far. It’s where you can stand out, get ahead of the competition and make your users take action.

The more value you give users through your content, the more you will receive.

And the better the content, the more it lets you get away with less UI and UX design.

That by no means indicates though, that you should just focus on content.

What you should do is create great content, and then highlight it using UI and UX design.

That’s what I want you to do.

So I’ve created a bunch of bonuses for you:

First: I created a PDF version of this post, so you can easily save it to your desktop, send it to your kindle, and access it wherever you want. This will make it easier for you to go through it again and apply the step-by-step content analysis I showed you.

Second: I compiled a list of 7 tips how you can use ideas from UI and UX design to highlight your content in the best way possible. This way you can enhance your great content even further, instead of just relying on it to do the work on its own.

All of the above is free.

Third: Exclusively for Onextrapixel readers, I offer an in-depth content consultation of your landing page at a 66% discount. You’ll see the special offer inside the bonus section, but you are free to choose if you would like to take it or not. This is completely independent from the other two bonuses.

Sounds good?

For access to all of this, simply sign up here and you’ll get to the bonus section.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.