10 essential UI (user-interface) design tips

Memorize these 10 guidelines if you want to build elegant, easy to use, and human-centered user interface designs.

John Moore Williams
November 25, 2019
Web design

A website is much more than a group of pages connected by links. It’s an interface, a space where different things — in this case, a person and a company’s or individual’s web presence — meet, communicate, and affect each other. That interaction creates an experience for the visitor, and as a web designer, it’s your job to ensure that experience is as good as it can possibly be.

And the key to that is to think about your user first, foremost, and always.

Thankfully, while web design is a relatively new discipline, it owes a lot to the scientific study of human-computer interaction (HCI). And these 9 handy guidelines straight from HCI research will help you focus on your users when designing websites and apps.

Interface design, which focuses on the layout of functionality of interfaces, is a subset of user experience design, which focuses on the bigger picture: that is, the whole experience, not just the interface.

1. Know your users

Above all else, you have to know who your users are—inside and out. That means knowing all the demographic data your analytics app(s) can pull, yes. But more importantly, it means knowing what they need, and what stands in the way of them achieving their goals.

Getting to that level of empathy requires more than careful analysis of stats. It requires getting to know the people who use your website. It means speaking with them face to face, watching them use your product (and maybe others), and asking them questions that go deeper than, "What do you think of this design?"

What are their goals? What stands in the way of them achieving those goals? How can a website help them overcome or work around those challenges?

Don't stop at knowing what your users want. Dig deeper and find out what they need. After all, desires are just outgrowths of needs. If you can address a user's deep-seated need, you'll address their wants while also fulfilling more fundamental requirements. 

The insights you'll uncover from analyzing data and speaking with users will inform every decision you make, from how people use your interface to what types of content you’ll highlight within that interface.

2. Define how people use your interface

Before you design your interface, you need to define how people will use it. With the increasing prevalence of touch-based devices, it’s a more pivotal concern than you might think. Just look at 

Tinder: the app’s user experience is literally defined by the ease and impulsivity of a simple swipe.

People use websites and apps in two ways: directly (by interacting with the interface elements of the product) and indirectly (by interacting with ui elements external to the product).

Examples of direct interactions

  • ‍Tapping a button
  • Swiping a card
  • Dragging and dropping an item with a fingertip

Examples of indirect interactions

  • Pointing and clicking with a mouse
  • Using key commands/shortcuts
  • Typing into a form field
  • Drawing on a Wacom tablet
‍Sometimes, an interaction is just too easy.

Who your users are and what devices they use should deeply inform your decisions here. If you’re designing for seniors or others with limited manual dexterity, you wouldn’t want to lean on swiping. If you’re designing for writers or coders, who primarily interact with apps via the keyboard, you’ll want to support all the common keyboard shortcuts to minimize time working with the mouse.

3. Set expectations

Many interactions with a site or app have consequences: clicking a button can mean spending money, erasing a website, or making a disparaging comment about grandma’s birthday cake. And any time there are consequences, there’s also anxiety.

So be sure to let users know what will happen after they click that button before they do it. You can do this through design and/or copy.

Setting expectations with design 

  • Highlighting the button that corresponds to the desired action
  • Using a widely understood symbol (such as a trash can for a delete button, a plus sign to add something, or a magnifying glass for search) in combination with copy
  • Picking a color with a relevant meaning (green for a “go” button, red for “stop”)

Setting expectations with copy

  • Writing clear button copy
  • Providing directional/encouraging copy in empty states
  • Delivering warnings and asking for confirmation

For actions with irreversible consequences, like permanently deleting something, it makes sense to ask people if they’re sure.

‍In InVision, clicking the trashcan icon doesn’t immediately delete a screen. Instead, it asks if you're sure and lets you know it can't be undone.

4. Anticipate mistakes

> To err is human; to forgive, divine.

Alexander Pope, "An Essay on Criticism"

People make mistakes, but they shouldn’t (always) have to suffer the consequences. There are two ways to help lessen the impact of human error:

  1. Prevent mistakes before they happen
  2. Provide ways to fix them after they happen

You see a lot of mistake-prevention techniques in ecommerce and form design. Buttons remain inactive until you fill out all fields. Forms detect that an email address hasn’t been entered properly. Pop-ups ask you if you really want to abandon your shopping cart (yes, I do, Amazon—no matter how much it may scar the poor thing).

Anticipating mistakes is often less frustrating than trying to fix them after the fact. That’s because they occurbefore the satisfying sense of completion that comes with clicking the “Next” or “Submit” button can set in.

That said, sometimes you just have to let accidents happen. That’s when detailed error messages really come into their own.

When you’re writing error messages, make sure they do two things:

  1. Explain the problem. E.g., “You said you were born on Mars, which humans haven’t colonized. Yet.”
  2. Explain how to fix it. E.g., “Please enter a birthplace here on Earth.”

Note that you can take a page from that same book for non-error situations. For instance, if I delete something, but it’s possible to restore it, let me know that with a line of copy like “You can always restore deleted items by going to your Trash and clicking Restore.”

The principle of anticipating user error is called the poka-yoke principle. Poka-yoke is a Japanese term that translates to “mistake-proofing.”

5. Give feedback—fast

In the real world, the environment gives us feedback. We speak, and others respond (usually). We scratch a cat, and it purrs or hisses (depending on its moodiness and how much we suck at cat scratching).

All too often, digital interfaces fail to give much back, leaving us wondering whether we should reload the page, restart the laptop, or just fling it out the nearest available window.

So give me that loading animation. Make that button pop and snap back when I tap it—but not too much. And give me a virtual high-five when I do something you and I agree is awesome. (Thanks, MailChimp.)

 

‍‍MailChimp offers both feedback and encouragement when you schedule or send an email.

Just make sure it all happens fast. Usability.gov defines any delay over 1 second as an interruption. Over 10 seconds, a disruption. And the latter’s generous: for about half the U.S. population, 3 seconds is enough to cause a bounce.

If a page will load in under 5 seconds, don’t display a progress bar, as it’ll actually make the loading time seem longer. Instead, use a visualization that doesn’t imply progress, like Mac’s infamous “pinwheel of death.” But not that. If you do use progress bars on your site, consider trying some visual tricks to make the load seem faster.

6. Think carefully about element placement and size

Fitts’ Law, a fundamental principle of human-computer interaction (HCI), states that:

The time to acquire a target is a function of the distance to and size of the target.

In other words: the closer and/or bigger something is, the faster you can put your cursor (or finger) on it. This obviously has all kinds of implications for interaction and user interface design techniques, but three of the most important are:

Make buttons and other “click targets” (like icons and text links) big enough to easily see and click. This is especially important with typography, menus, and other link lists, as insufficient space will leave people clicking the wrong links again and again.

Make the buttons for the most common actions larger and more prominent.

Place navigation (and other common interactive visual elements, like search bars) on the edges or corners of the screen. This last might seem counterintuitive, but it works because it lessens the need for accuracy: a user doesn’t need to worry about overshooting their click target.

While you’re thinking about element placing and size, always keep your interaction model in mind. If your site requires horizontal scrolling rather than vertical scrolling, you’ll need to consider where and how to cue users to this unusual interaction type.

7. Don’t ignore standards

Being highly creative types, designers tend to love to reinvent things—but it’s not always the best idea.

Why? Because a revamped version of a familiar interaction or interface adds “cognitive load”: it makes people think again about a process they’ve already learned. Obviously, you can reinvent the wheel all you want—but only if it actually improves the design.

This rule of thumb explains why Google Docs’ menu bar features almost all the same options as Microsoft Word’s before Vista:

‍Microsoft Word's menu bar before Vista.

 

‍Google Docs' menu bar, 2015

It also explains why Pocket had to change the placement of the archive button in their Android app a few years back.

‍‍Changing a single button to be more consistent with Android's design patterns made new users 23% more likely to keep using Pocket.

Up till fall 2013, the archive button was at the top left of the screen—right where Android design specs said the “Up” button should be. Pocket wanted to focus people on the reading experience, and not duplicate an existing hardware control, but the inconsistent placement caused new users to accidentally close and archive the article they were reading, rather than simply returning to their reading list as expected.

That tiny change "increased the likelihood [new users] would continue using Pocket from this point onwards by 23%."

8. Make your interfaces easy to learn

When it comes to simplicity, people often cite a paper by Harvard psychologist George Miller called, “The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information.” The article suggests that people can only hold 5 to 9 things in their short term memory with any reliability. Miller himself called this a coincidence, but that doesn’t seem to hold anyone back from citing him.

That said, it’s only logical that the simpler something is, the easier it is to remember in the short term. So, whenever possible, limit the number of things a person needs to remember to use your interface efficiently and effectively. You can facilitate this by chunking information, i.e., breaking it into small, digestible chunks.

This idea dovetails with Tesler’s Law of Conservation of Complexity, which states that UI designers should make their interfaces as simple as possible. That can mean masking the complexity of an application behind a simplified interface whenever possible. A popular example of a product failing to follow this law is Microsoft Word.

Most people only do a few things in Word—e.g., typing—while others can use it to do all sorts of powerful things. But around the world, everybody opens the same version of Word, with the same UI, leaving your average Joe—who's not a power user—overwhelmed by the variety of options they’ll probably never use.

This led to a concept called progressive disclosure, where advanced features are tucked away on secondary interfaces. You’ll often see this on websites’ home pages, where short chunks of copy introduce a product or feature, then link off to a page where users can learn more. (This also happens to be a best practice for mobile design, where robust navigation is always a challenge.)

Pro tip: Avoid using “learn more” and similarly non-specific text in links and buttons. Why? Because it doesn’t tell users what they’ll “learn more” about. Often, people simply scan a page looking for a link that takes them where they want to go, and “learn more,” repeated 15 times, doesn’t help. This is especially true for users of screen readers.

9. Make decision-making simple

Too much of the web screams at us: “Banners” suddenly expand to become full-screen ads. Modals pop up, imploring us to subscribe to blogs we haven’t had a chance to, you know, read yet. Video interstitials stop us in our tracks, forcing us to watch precious seconds tick oh-so-slowly by. And don’t even get me started on the widgets, flyouts, tooltips …

Sometimes I long for a calmer web—and Hicks’ Law gives us all a reason to build one. The idea’s as simple as its end result: the more ui options you present a user, the harder it becomes for them to make a decision.

This impacts almost everything we build:

  • Overall layouts
  • Navigation menus
  • Pricing pages
  • Blog indexes
  • Content feeds

The list goes on. But the upshot is: the simpler we make our designs, the faster and easier it is for users to make the decisions we want them to make. That’s exactly why landing pages and non-newsletter emails should only have one call to action.

Pro tip: Sometimes, you actually do want users to slow down and consider their options. That’s why the tiled designs of Pinterest, Dribbble, and many blogs actually work well. After all, the more options you have to decide between, the more likely it is you’ll find one that works for you.

10. Listen to the data

While we all might wish our designs were evaluated purely on their artistic merit, the reality is that optimizing your design to meet its objective is just as important.

While we all might wish our designs were evaluated purely on their artistic merit, the reality is that optimizing your design to meet its objective is just as important. 

While user research and testing can be incredibly helpful in guiding your design decisions toward fulfillment of your site’s goal, data gathered after launch remains invaluable.

So set up analytics for your site, and analyze them regularly. There’s a bunch of different analytics tools out there, but I recommend Google Analytics and/or Mixpanel, depending on the project type.

Mixpanel focuses on events, so it collects data based on actions a visitor takes on your site, while Google Analytics is more behavioral, giving you session times, traffic sources, etc. While both tools can provide both forms of data, they really shine in their focus areas, so choose whichever best fits your needs.

Note: both of these tools are free for up to a certain amount of data points. Webflow and similar platforms usually make analytics setup easy through a simple API key exchange.

Great interaction design in Webflow sites

Many designers who use Webflow have applied these guidelines to build intuitive and engaging interactions. Here’s a few examples.

Expanding circle navigation

Waldo Broodryk created a fun mobile- and desktop-friendly animated menu. On page load, the circle in the lower right reads “Menu.” On click, it expands to reveal the available pages and changes to an X, allowing the user to close the menu and refocus on the content.

It’s a great combo of clear and engaging design, and plays close attention to Fitts’ Law: it’s easiest to target links at the edge of the screen. Circular navigation makes for an interesting option when you don't want to imply hierarchy in your navigation.

Do you buy that girl a drink?

Designer Shane Hurt put together this amazing interactive decision tree to help you decide whether or not to buy that girl a drink. The design packs in a ton of content, but keeps you laser-focused on the task at hand: answering the current question, and moving on toward your decision. Way to keep the interface simple, Shane.

Uniqlo redesign

uniqlo alternative homepage

Designer Tim Noah was shopping on the Uniqlo website one day when he realized how complex and unique their navigational system is. Inspired, he decided to “recreate this but in a more tablet and mobile friendly way.”

My favorite thing about it is how he turned Uniqlo’s multi-level nav, which takes several clicks and page loads to traverse on the brand’s actual desktop website, into a single-page experience. (To be fair, Uniqlo does the same thing on their mobile site, but it’s a mobile subdomain, not a responsive version of their desktop site.)

Note: this redesign was a personal project only, and in no way affiliated with Uniqlo.

Lead Sport Accelerator

start up to lead

Early in 2017, designer Jaro Quastenberg launched a site that really shows the power of visual interactions in Webflow: Lead Sport Accelerator.

The site really shines on two of the above mentioned tips. The first: knowing your users. Lead Sports Accelerator knows they’re trying to attract product-builders, and to do that they must make a great first impression via their website. The second is giving feedback. Whether you’re scrolling, hovering, or clicking an element on the page, it immediately responds to the visitor’s action, often in dramatic and delightful ways. 

From the menu to scroll interactions – this is a great example of optimized function on what some may consider art combined.

Ok, you’ve nailed the basics

Now go forth and make some gorgeous, usable interfaces. And feel free to share the best—and worst—examples of UI design you’ve seen in the worldwide wilds of the web in the comments.

Anyways, if you're still skeptical, know that what you’re currently reading is entirely built and hosted in Webflow. But again, I could just be biased because I use Webflow — professionally and personally. I’m not saying it’s the only option. I'm just saying be wary of technical SEO if you decide to go with other solutions.

Okay, now that you have a better understanding of technical SEO, let’s get into what really brings in traffic and customers to your website — content!

content loading gif

On-page SEO: why you need to focus on it when creating content

Assuming you have a website that was built cleanly with SEO in mind, let’s move on to the actual content creation side of things. To break it down simply, on-page SEO is concerned with how you create and present content on your website. It’s a practice of making sure pages on your websites are optimized to be easily indexed by Google. This will apply to any page on your website that has content on it — so pretty much every page. But, I’ll primarily explain things in the form of blog posts on a website as it’s probably the easiest way to understand. Again, a lot of assumptions here on my part, but I’m assuming you’re a business that needs visitors and customers, and you’ll definitely need content to persuade people to buy from you.

Moz's on-page SEO hierarchy of needs (source)

On-page SEO is extremely important because it’s your opportunity to “give Google what it wants.” Actually with any platform, whether it’s YouTube, Pinterest, or whatever, making sure you understand and play to how algorithms read content is extremely important.

If we take a short trip back to the beginning of this article, I mentioned how Google’s mission is to categorize all the content in the world. Making sure you follow on-page SEO best practices is how you’re going to make sure Google can easily index your content and know what it’s all about. In a lot of cases, you can rank a piece of content on the second or third page of Google simply by following on-page SEO best practices, without much promotion. And if you have a really high domain authority, you can even reach the first page without much promotion — more on that later.

Speaking of rankings in Google, I think at this point you’re dying to just know how to rank content. So, let's go over exactly how to utilize on-page SEO, and other ranking factors, to get your content seen in organic search results.

How to rank your content in Google

Want to hear a secret that most “SEO experts” don’t tell you about ranking content in Google?

Google makes the hardest things to manipulate the most important ranking factors.

Write that down and read it back. Let it soak in.

despicable me minions gif

Knowing this, stop looking for “tactics” and “hacks” to rank your content on Google. I’m talking to you PBN lovers. SEO is a slow and steady game. You don’t want it to be fast and easy. Otherwise, everyone would invest their time into it. If SEO results came fast, you would lose rankings just as fast as you received them. And we would just call SEO viral marketing (yuck). 

Google is extremely smart. In fact, a lot smarter than you think. Way smarter than me or you. Don’t try to game it. Instead, focus on the hard stuff. The stuff most businesses aren’t willing to invest in. Because that’s where the real long-term ROI will come to play. Never play the short-term game — that goes for everything beyond just your business.

So, let’s go over some ranking factors that affect how Google decides to rank your content. These will be listed in order of most important to least — but they are all very important regardless. Don’t take the list I'm about to present as hard facts. They are just mere observations on what I believe to be true based on lots of experimentation.

What factors affect your Google rankings?

From most important to least, aka from the hardest to easiest to manipulate, Google cares about:

  1. Content quality and its relevance to a search query
  2. Your domain authority
  3. Backlinks and page authority
  4. Your on-page SEO
  5. Keywords in your domain and it’s age
  6. How many page views you’re receiving at a given time

Now, there’s actually a lot of different ranking factors… so they say. According to Brian Dean of Backlinko, there are over 200 ranking factors.

However, the above 6 or so things I mentioned are probably the top “hardest” things to manipulate — making them outweigh almost any other ranking factor that other sources will tell you about. I know this because I’ve experimented with all of them. So, let me show you how to nail each one for your business.

1. RankBrain: how Google judges content quality and relevance

Throughout the years, Google’s Rankbrain algorithm has been getting smarter and smarter. This is because Google has a shit ton of data — like a lot. Think about it. There are over 63,000 Google searches every second. In the amount of time that it took you to read this sentence, there were over 250,000 searches on Google. All those searches, coupled with over 2 million articles posted each day, allows Google’s machine learning algorithm to know exactly what makes good content. Plus, not everything on Google is a blog post. So there are actually way more data points than I just mentioned.

I don’t consider myself a Google algorithm expert, no one is. Not even Google employees. But I can tell you that the most important thing to Google is to give searchers great content in the least amount of clicks as possible. Google wants users to search for something and have the first link they click on to be the best possible resource for them. Heck, Google cares so much about this that they created featured snippets so people don’t even have to click on anything for some search queries.

This is why you’ll hear some people say, “just create better content” than what's currently ranking in Google if you want to outrank them. But how do you know that your content will be “better?” It’s extremely hard to create amazing content, and that’s exactly why it’s probably the most important thing you should focus on.

I can’t 100% tell you what makes good and bad content, but a rule of thumb is if you search something in Google, and click on the first link, it should answer your problem right away. If you notice that the first link for a certain query/keyword doesn’t give you the answer you think it should, there’s your opportunity to shine. It’s very subjective, I know. But it’s the most honest answer I can give you.

And Google knows this. For example, if you click on an article that ranks number 1, then back out and proceed to click on the article that ranks number 2, it sends Google a signal that the first article you clicked on did not answer what you were looking for. Then, it starts to consider making the second article rank first instead — assuming you didn't keep clicking on different articles after you viewed the second one. Hope that makes sense.

pogo sticking google ranking factor
"Pogo sticking" between articles can be a bad Google user experience signal

On the same token, relevance to a keyword search is extremely important. To get a better understanding of relevance for certain keywords, just Google something (in an incognito or private window) and see what comes up.

For example, if you search “dog toys” you’ll see a bunch of links that go straight to websites that actually sell physical dog toys. If you write a blog post on dog toys, and try to rank for that keyword, you best believe it’ll never make it to the first page of Google. This is because Google knows people searching for dog toys are looking to buy physical dog toys, not read articles talking about them. So, it will always favor ecommerce stores selling dog toys as it believes that this is the most relevant option to the given search.

On the flip side, if you search for “what are the best dog toys for puppies” you’ll notice that all the top-ranking articles are blog posts talking about the best toys your puppy needs. Again, this is because Google decided that these are the most relevant options for the given search term. So, if you want to rank for that keyword, write a blog post.

Google also looks at things like CTR (click through rate) and TOS (time on site) as ranking factors. We won't get too in-depth on these because they're pretty self-explanatory. To have a high CTR you just want to make sure your title and meta description are appealing to a searcher, and for time on site you want someone to spend as much time on your page as possible. The latter sends Google a signal that your page is interesting and that it should show it to more users as a result.

If there’s something to take away from the first ranking factor it's to create better content and only create content that is relevant to the search. Creating great content is hard because it’s subjective — making it the hardest thing to manipulate. But, if you think you have a unique or better way of explaining things compared to the top-ranking articles, go for it. And creating content that’s relevant to the search is simply a matter of Googling a keyword and seeing the type of content Google likes to rank.

2. Your domain authority

Domain authority is something I pay a lot of attention to, sometimes more than I actually need to. This is because I’ve noticed, in a majority of cases, websites with higher domain authorities tend to rank higher in search results. I’d actually go out and say that domain authority is actually the number one most important ranking factor. But because a high DA (domain authority) is a by-product of great content and a strong brand, we’ll keep it as the second most important ranking factor.

But first off, what is domain authority? I like to think of it as your brand's strength and quality. For example, in a world where soda companies are websites, Coke would have a higher DA compared to Shasta (hope I didn’t offend anyone there).  

DA is actually an arbitrary number, from 1-100, created by Moz — not Google. Google would rather you not calculate the strength of a domain based on a number. DA is based on a handful of things, but mainly on the quality of backlinks you have — which essentially means external websites that link to your page. If you’ve ever used any sort of SEO tool, you’ll notice a lot of them rank difficulty based on things like “domain rating,” “domain authority,” or in the case of Ubersuggest, “domain score.”

In the SEO community, domain authority is probably the one most looked at. Whatever SEO tool you use, the ratings will be relative to each other so pick one SEO tool and stick to it. It won’t make sense to compare Moz’s domain authority to Ubersuggest’s domain score as the values are calculated differently.

Personally, I just stick to SEO tools that show the Moz domain authority. I’ll explain more about the specific tools I recommend in a sec, just keep reading. 

Now, you might be thinking “how am I going to compete if I’m just starting out?” And that’s a valid point. It’ll be hard to rank for the keyword “best quotes” if you’re a brand new website because all websites on the first page of Google for that keyword have a DA of at least 50. And it will take a good amount of effort and time to reach a DA of 50. But, even if you’re just starting out, you shouldn't let websites with high domain authorities discourage you from trying to compete. It wouldn’t make sense because no website starts out with a high domain authority — it takes time and effort to get there. Instead, you need to be strategic with what type of content you create.

Instead of trying to rank for “best quotes” you can choose a long-tailed keyword like “best quotes from 1917.” Where, at the time of writing this post, there is a website with a DA of 6 ranking on the first page of Google for that term. And getting a DA of 6 is almost as easy as just creating your website and having your social media profiles link to it.

So, understand that building up your domain authority takes time. If you can get links from websites that have really high DAs like Forbes or Inc, then it could help expedite the process. 

If your website is brand new, focus on long-tailed keywords with low competition and create great content, something we talked about earlier. As a result, people may share your article and your DA will increase. Of course there will be less search volume for these keywords, but you need to start small in order to grow. Growing to a high DA of something like +50 is not impossible. It just takes effort and time. Again, going back to the concept of making the most important ranking factors the hardest to manipulate.

factors that affect domain authority
Domain authority ranking factors (source)

One thing I usually tell my friends that want to start creating content in a specific niche is to always start with a sub-niche. For example, if you want to create a website that teaches people how to build websites, focus on a small cohort of people trying to build websites. As in, focus on something like people who specifically want to build photography portfolios.

If you can, try diving even deeper. For example, people who want to build photography portfolios specifically in Webflow. Or, people who want to build a photography portfolio for a job interview. The competition will be much less for these topics compared to targeting everyone who wants to build a website. Starting super sub-niche, then branching out broader into your niche later, is how you’re going to slowly build up your website traffic and domain authority as a new website.

Now, how exactly would you grow your DA to help you rank easier for different keywords, and more importantly how would you rank a specific article higher in search results? Well, here are where backlinks come to play.

3. Backlinks and page authority

Backlinks are links from different websites that link back to your website. For example, if you were to share this post in one of your blog posts, you would give this page a backlink. Which if you liked this post, I hope you do because this content is completely free and took me a while to write. Similarly, I could give another page a backlink by linking to it — just like I did right there. 

what is a backlink
A visual representation of a backlink (source)

This goes back to Google’s core algorithm, PageRank. Google decides to rank content in its search results based on how many backlinks a website, or article, has. Now, just because you have a lot of backlinks doesn’t mean you rank higher. Backlinks are not created equal.

For example, if you were to search “how to learn python” in Google, the first ranking article has a fraction of the number of backlinks as the second ranking article. At the time of writing this, the first ranking article also has a lower DA (by more than 30) compared to the second ranking article. So why is the first website still ranking higher?

It could be due to a multitude of things, but if I had to quickly guess it would be because that the first article is written a lot better (think back to the first ranking factor) and because the backlinks that the top ranking article has come from quality sources that also have high DAs.

For example, if Forbes were to link to your article it would be a lot more valuable compared to if a niche lifestyle blog were to link to you. This is because Forbes has a strong and reputable brand that has an insanely high DA — 95 at the time of writing this. If Forbes links to you, it gives Google a signal that your website must be valuable to some degree.

However, Google is also now focusing a lot on backlink relevance. This means that the anchor text, and the website you receive a link from, should be relevant when you’re getting a link. For example, in the previous sentence, I linked out to a post that explains what anchor text is. The backlink Moz just received from this post is a highly relevant backlink because we are talking about anchor texts and I linked to an article that explains what it is.

Making sure your backlinks come from relevant anchor texts can help with the quality of your backlinks and help improve the page authority of an article you are trying to rank for. Now, we didn’t get much into what PA (page authority) is but it’s essentially a DA for a specific page.

While DA gives you an overall score of your entire domain, PA gives you a score for an individual page on your website. A high DA will naturally yield a fairly strong PA, but strong backlinks to an article can actually increase your PA past your overall DA in some cases. This is why sometimes websites with lower DAs rank higher. PA can increase from things like backlink quality, social likes/shares, and internal links from other pages on your website.

I hope I explained that in the least confusing way possible, but I’ll show you what I mean visually in the case study section. If you’re a bit confused feel free to leave a comment at the bottom of this article and I’ll try to respond.

Anyways, let's get into the next ranking factor, and one I believe to be quite important — on-page SEO.

4. On-page SEO: how to create content on your website

When I think of SEO, I primarily think of on-page SEO. Even though it probably isn’t correct to think this way, I see on-page SEO simply as speaking Google’s indexing language. In a lot of cases where you are doing SEO for another business, optimizing on-page SEO can be the low hanging fruit to go after.

In the example of a business blog, most businesses write just for the sake of writing, so a lot of them have pretty bad on-page SEO. And because this ranking factor is 4th on our list, it’s not insanely hard to do.

This ranking factor can be an entire post on itself but I’ll make sure to only give you what you need to know and nothing of what you don’t.

First, on the technical side of things, you want to make sure your website has an SSL certificate and is secured. Most hosting providers, including Webflow, already come with this as a standard. Just make sure when your website loads it has HTTPS in front of the URL and not HTTP.

showing ssl secured url
In Chrome, you’ll see a lock next to a URL that shows the website is SSL secured

Next, you’ll want to make sure your website loads fast. Preferably, you want a page to load in less than 3 seconds. You can test page speed with Pingdom’s speed test. If your website takes longer than 3 seconds to load, consider either finding a new hosting provider or cleaning up the code on your website to speed things up. With Webflow, you should experience load times to be less than 2 seconds, with smaller websites loading in half a second.

Next, you’ll want to make sure your website is responsive. This is extremely important as you should optimize for mobile SEO whenever you can. If your website design doesn’t look right on a mobile device then this could seriously hurt your SEO. Just use Google’s mobile-friendly test tool to check for this.

Okay, now let’s get into how you’re going to optimize your content around a specific keyword. I’ll show you an example from the Webflow Blog in a small case study at the end of this post. But for this part, you need to understand the fundamentals.

First, you want your keyword to appear in your URL. Say you wanted to go after the keyword “best puppy food.” You would want your website URL to look something like:

  • https://yourwebsite.com/best-puppy-food
  • https://yourwesbite.com/blog/best-puppy-food

Both are okay, it doesn’t matter if your post is on the root of your domain or in a folder (name could be different from blog). But the point is your URL slug should include the exact keyword you’re going after.

Next, you want to make sure the keyword “best puppy food” is in your H1 title tag. In the example of a blog post, this means it should be in the main title. If we do a quick relevance check, we can see that Google likes to rank listicle type articles for the keyword “best puppy food.” So an example of a title we could use is:

  • 10 best puppy food options in 2020

That probably isn’t the best title, but the idea is that you want your keyword, or some variation of it, in the title. To help you write great titles, try using a headline analyzer. Just Google “headline analyzer” to find a handful of solutions. CTR (click-through rates) are going to matter a lot because it’s how you’ll initially get people to even click on your website. So make sure you title things properly and accurately.

Next, you want to make sure your keyword is in the meta tag, or description, of your post. The meta description is the little paragraph you see under the title when you Google something. It gives you a sneak peek of what the article is about, and you want to make sure that your keyword is somewhere in there. This way when Google crawls and indexes your page, it can quickly figure out what the content is about.

importance of on page seo

Next, you want to make sure any images you use in your blog post have proper alt text. I won’t get too deep in them, as this post will be longer than it already is. Just Google it.

Another key tip with images is to use proper file names. Don’t have the file name of your images be a random string of letters or numbers. Actually name them properly, as this will increase your chances of having them rank in Google’s image search. It’s also ideal to have any images with transparent backgrounds to be uploaded as PNG's, and ones without transparent backgrounds to be JPEG’s. This is mainly due to image file sizes, as you want your images to load fast. So make sure any images you use are under 300kb. If your images are too big, Google “PNG compressor” or “JPEG compressor” and use a tool to help bring down the file size before you upload them to your site.

Next, you want to have LSI keywords within your content. LSI stands for latent semantic indexing and it’s just a fancy way of saying synonyms or variations of your main keyword — makes me sound smart saying LSI. Use a tool like LSIGraph and type in your main keyword and see what other keywords pop up. In the case of our main keyword being “best puppy foods,” some LSI keywords that pop up are “dry puppy food,” “wet puppy food,” “large breed puppy,” and much more. We want to use some of these keywords within our content about "best puppy foods."

Another great tool you can use, that’s like LSI on steroids, is Clearscope. Clearscope essentially analyzes the first several ranking posts in Google, for a given keyword, and tells you what keywords to have in your content for maximum relevance and reach. It’s a bit pricey, but worth it if you output lots of content.

on-page seo tips

Alright, that’s about all you need to know about on-page SEO. You can dive deeper if you want by reading more about it elsewhere. But we pretty much went through the fundamentals.

5. Keywords in your domain and its age

The fifth ranking factor on our list is domain age and what your domain name actually is. Now, I won’t get much into domain age because it basically just means how long your website has been live for. If your website is brand new and you start building backlinks to the website quickly, Google may think you're using "tactics" to grow your DA. So take things slow, especially if you use something like a PBN to start growing a website's authority quickly — Google will flag you.

But what's more important is what your domain name actually is. It took me a while to realize this, but it does matter for SEO. For example, go in a private window and search for the keywords “website” or “consulting” and see what the first ranking result is. I rest my case. 

But on a serious note, while keywords in your domain do help, it only really matters if you’ve also focused on the above 4 ranking factors. Keywords in your domain are good, but it doesn’t make sense for every website. So don’t worry about it too much.

6. Traffic

Last on our list is how much traffic a page is receiving at a given time. This one might make you go, "huh?" I actually didn’t even know this was a thing until I tested it. But it made sense once I realized that Google does rank breaking news articles pretty high in its SERP.

Essentially, when a page is receiving a surge of traffic, it sends Google a signal that it’s “breaking news” or really important, and starts to rank it higher for others to easily find. For example, we had a post ranking in position 8 for a while and it wouldn't move up. So, we sent it in a newsletter to give it a sudden surge of traffic.

webflow ranking for featured snippet

After a couple of weeks, the post was ranking number 1. We also tested this with running paid ads to a blog post and it worked just the same. There’s actually a recent blog post by Grow and Convert on this that you should check out to learn more in-depth.

Alright, that about concludes it for the top ranking factors. Again, there may be a few more. But these are the only ones I really pay attention to — at least for now.

Case study: ranking number 1 in Google

As promised a little earlier, here’s a small case study of how we ranked number 1 for the keyword “UX design tips.”

First, we used an SEO tool that showed us Moz’s DA. I’m not going to tell you exactly what tool to use, but for this example I went ahead and used a budget-friendly tool called Keysearch.

We knew we wanted to write an article around “UX design tips” so we typed in the keyword into the tool:

In Keysearch you can see PA, DA, and backlink count — all things we talked about earlier

Now, at a quick glance, you can see our article is ranking number 1. But when we initially did our keyword research our article wasn’t there (duh), so ignore the first result. Knowing we had a stronger DA than the first 2 articles made us sure we could rank for this term.

However, the first ranking article (again, ignoring ours) had a lot of backlinks. But, because we knew DA is valued pretty highly, it didn’t scare us away. 

Next, we followed all the protocols mentioned in the on-page SEO section of this post — making sure relevant keywords and the content quality was there.

We wrote and published the post and then followed a distribution strategy. Generally, I like to wait until I know a post is indexed in Google before going hard on distribution. It’s important to treat content on your website as a product launch. So making sure you share the article on your social media accounts and email list is important. In some cases, you can even use paid advertising to help boost the promotion of posts. We also followed a link-building strategy by making sure we interlinked any of our previous relevant articles to the post.

After about 3 months the post ranked number 1. And at the time of writing this, it’s been in that position for a while. Voilà!

seo magic

See, I told you SEO was simple.

Now, you can actually follow this exact process for existing content on your website too, especially if you’re doing SEO and content marketing for a website that already has lots of content. This can be a huge quick win.

A beginner’s guide to republishing posts for an SEO boost

Because SEO is a long term game and it can take a while for content to rank, sometimes over 6 months, updating old posts will yield quicker results compared to creating new ones. This is because if you already have a post ranking in Google, it’s already gone through the long process of Google indexing it.

We did this with one of our old posts that had been on our blog for a couple of years. And this happened…

updating a post
A Google Analytics screenshot. The red arrow indicates when we updated this post

Talk about a 100% increase in traffic! What happened was we went back, followed all the on-page SEO protocol, republished the post (making sure the date was updated), and followed our distribution strategy again. 

Related reads: How to double your page views without publishing anything new

And no, this wasn’t a one-off. Here’s one that grew by over 300%:

updating a post again

See, we know what we’re talking about. But seriously, you can do this too. Just make sure to go back and read this post whenever you forget something. Bookmark it so you can refer back at any time. In a future post, I may even explain more on developing an actual content strategy. If I included that here, this post would be twice as long. But, before I give a recap over everything we went over in this post, I want to explain one more thing about republishing.

In some cases, you may have URL slugs that are not on-page SEO friendly. If you want to update a post that is already ranking somewhere on the first page, say between 5-10, don’t worry about changing the URL. You’ll break things, especially if you change the original canonical tag

However, if you notice a post is on the second, third, or even fourth page, and you want to republish it and follow this protocol, update the URL slug and 301 redirect it to your SEO friendly URL slug. But make sure you keep the original canonical tag. We didn’t get much into canonical tags, but they’re essentially a way of telling Google that this is the original article so you don’t have duplicate content. So, once something is published for the first time, never mess with the canonical tag. If you want to update URLs, just 301 redirect the old page to the new one — while keeping the old canonical. I thought I’d mention this because I’ve broken posts in the past when I didn’t understand this logic.

Anyways, I hope all this helps.

Conclusion

If you made it to the end of this post I salute you. Knowing all of this will put you ahead of the game when it comes to being an SEO master and content marketer. While I don’t consider myself an expert in anything, I am fairly competent when it comes to SEO. But only because I’ve spent a while focusing on it. I wrote this guide for my younger self and I if you even learned one thing from this, I did my job.

Anyways, as a recap, we discussed:

  • What website SEO is
  • How Google actually works
  • What makes SEO special
  • Types of SEO: both technical and on-page
  • How to rank your content
  • All the (important) ranking factors
  • A mini case study
  • A beginner’s guide to republishing content

It’s also a good idea to check out tools such as:

  • Google Analytics
  • Google webmaster tools
  • Moz, Ubersuggest, or Keysearch
  • Clearscope or LSIGraph
  • Ahrefs
  • Keywords Everywhere chrome extension

We didn’t get much into the exact tools, besides a few of the ones mentioned above. But what's more important than the tools are the fundamentals, and knowing how to apply them to your research when using any tool you choose to use.

Let us know in the comments below what you thought of this post. If you have any questions we’ll be sure to do our best to respond.

Now go make some awesome content, the world needs it!

John Moore Williams

Head of Content Strategy at Webflow. Nice to meet ya. Follow me @JohnAMWill.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.