Welcome to My Blog

When it comes down to it, design is all about making choices. Each color, shape, line, font, text, and graphic you use will ultimately influence the message you’re trying to get across.

I’ve often been in conversations with people who know they should get better at design, but they don’t feel they have a “natural sense” for creativity. However, I argue that learning to design well has as much to do with psychology and user behavior as it does creativity.

But learning the “psychology of design” doesn’t mean picking up a playbook that’ll tell you the right and wrong way to design something. That’s just not the way it works.

What brushing up on psychological principles (as they relate to design) will do is help you understand what goes into the creation of intuitive, intentional design experiences. 

Want to learn more? We’ll dive into a handful of psychological principles below to help you get the wheels turning.  

8 Psychological Principles That’ll Change the Way You Design

1) Mental Models

Computer scientists and UX designers think and talk a lot about mental models, because the process of designing something new — like a website layout or a new app — requires trying to uncover and act on what users might find to be intuitive.

Mental modeling is the process of mapping out what a person understands about the real world through experience and replicating those models in the design of something in the virtual space. This is all about trying to uncover your audience’s intuitive process.

Think of your computer files and folders. They’re based on the same old-school method of organizing hard files, so it’s easy for the user to understand — despite the visual looking rather different.

For designers, understanding what mental modeling is and why it’s important comes down to simply designing with your users’ experience in mind.

Throughout your design process, do an “intuitive check.” Are your visuals moving right to left, top to bottom? Is your message clear and easy to understand, or is it unintentionally hidden?

A gut check with a friend or coworker is a great way to keep an eye on whether your mental modeling is working well in your designs.

2) The Von Restorff Effect

The Von Restorff effect is, quite simply, the idea that the oddball out is the one that gets remembered.

When designing, sometimes you want your audience’s eye to be drawn to one spot –even if there are other design elements around it. This might mean using a different color, font, size, etc.

In this example, Target Jobs, a UK-based career and job-searching tool, used this image to illustrate how one might stand out from the crowd in the job market. By placing a group of similar elements next to one different element (the red shoes), this image uses the Von Restorff effect to show how it’s the different idea that really stands out to the viewer.

Image Credit: Target Jobs

While this example’s idea is fairly straightforward, you can also use the Von Restorff effect throughout your site pages to draw your users’ eyes to certain spots on a page.

For instance, in CTA creation, you can use the Von Restorff to create contrast on your page and draw your users’ attention, like this:

3) Gestalt Principles

Gestalt psychology explores how elements are perceived in relation to each other visually. The gestalt principles, or gestalt laws, focus specifically on how design elements are grouped together.

• Proximity: The idea that when objects are placed in close proximity to one another, those objects are seen as a group rather than seen individually. Although there are lots of shapes within the “U,” in the Unilever logo, the eye still recognizes those objects as a group making up the “U” figure.

Image Credit: Unilever

• Similarity: Objects that look similar will be perceived as one object or as a part of the same group. In the NBC logo, the similar cones are perceived as a group because they look similar to one another.

Image Credit: NBC

• Closure: Closure occurs when a shape is still perceived as a whole even when the object is not fully closed in reality. In the Girl Scout logo, the shapes and whitespace are used to create a perceived series of silhouettes even though only some of the shapes are actually enclosed.

Image Credit: Girl Scouts

• Continuity: Occurs as the eye moves naturally from one object to the other. This often happens through the creation of curved lines allowing the eye to flow with the line. In the Olympic logo, the eye can see that the objects are continuous as they link with each other, creating a grouped visual.

Image Credit: Olympics

• Figure & ground: When the eye notices an object as an object, it separates the object (figure) from the surrounding area (the ground). In this logo-tribute to Steve Jobs, the viewer either see the white space as the figure or the ground, depending on whether the eye looks at the apple or the silhouette of Steve Jobs.

Image Credit: Jonathan Mak Long (via The Next Web)

4) Visceral Reactions

Have you ever come across a website, picture, or anything visual that you just instinctively loved but couldn’t necessarily explain why? You probably had a visceral reaction — the kind of reaction that just comes from the gut.

Designing for visceral reactions is essentially designing to create a positive aesthetic impression. To some extent it takes just knowing what looks pleasing to people and what doesn’t.

Airbnb uses visceral designs to capture the beauty and exotic aesthetic of travel. Although most Airbnb’s for rental probably don’t have beachside views or colorful accommodations, Airbnb uses design to connect their audience with the excitement and possibility of traveling the world.

Designing for the visceral can be as a simple as using beautiful photography and colorful imagery to capture the attention of your audience.

5) The Psychology of Color

We often associate different colors with feelings or thoughts, so designers have done a lot of research to find out which colors humans associate with different moods.

For a more in-depth look at which colors are used for different moods, here’s a great infographic on the psychology of color. Otherwise, here’s the basic rundown:

Blue: Secure, calm, honest, trustworthy, strong, caring

Corporate businesses often use blue to convey a neutral sense of trustworthiness. Facebook’s blue color scheme, for example, helps convey to users that it’s a secure, strong social network. This helps users feel a sense of privacy and security even when sharing and displaying lots of personal information.

Red: Energy, love, exciting, action, bold, passionate

Coca-Cola is one of the classic examples of how a company has used red in its branding to communicate how exciting and energetic it is as a product.

Orange: Happy, sociable, friendly, affordable

At HubSpot, orange is our favorite color. And it’s no wonder why we love it so much — it communicates to our audience how happy we are to be helping our customers do better marketing.

Yellow: Logical, optimistic, forward-thinking, confidence, playful

Bzzy, an app that let’s you easily auto-reply your friends when you’re busy, uses a yellow color scheme to communicate its innovate style while still maintaining a sense of playfulness.

Purple: Imaginative, creative, nostalgic

Kaleidoscope’s purple color scheme helps communicate the imaginative, helpful nature of its app: an app that helps you do quick and easy file comparison when you need to merge changes across different versions.

Green: Growth, organic, natural, caring, fresh, earth

For companies, like Whole Foods, that want to highlight an obvious connection to nature and freshness, using green as a basis in their color scheme is a no brainer. Green helps communicate the natural, organic feeling that Whole Foods strives to tie into its branding.

Black: Sophistication, luxury, seductive, formal, authority

Want to travel in VIP style? 212 Supercars, a luxury car rental and driver service, uses a sleek black-and-white design to communicate it’s luxurious and exclusive branding.

Multi-color: Multi-channel, positive, playful, bold, boundless

Google, the classic example of a multi-channel, playful company communicates it effectively through its use of the multi-color scheme.

6) The Psychology of Shapes

Like colors, humans associate different shapes with certain emotions and characteristics.

Although less of a principle itself, the psychology of shapes boils down to studies that have shown which characteristics people match with certain shapes.

Circles, Ovals, and Ellipses: Positive emotional messages attached to community, friendship, love, relationships, unity, and femininity.

AT&T’s circular logo helps its brand communicate a universality feel. As a wireless network, this makes sense. The use of shape helps connect the audience with a recognizable pattern.

Image Credit: AT&T

Squares and Triangles: Stability and balance, strength, professionalism, efficiency, power, and masculinity.

Microsoft and Delta both use triangles and squares in their logos. This helps establish feelings of stability and efficiency when viewing the logo, which are positive feelings to associate with brands.

Image Credit: Microsoft

Image Credit: Delta

Vertical Lines: Masculinity, strength, and aggression.

While the basic cloud shape of SoundCloud’s logo might communicate emotions associated with dreaming and creativity, the vertical lines create a more aggressive feel. It’s the combination of the lines and the overall cloud shape that helps communicate the duality of the creative and the strength of SoundCloud as a tool.

Image Credit: SoundCloud

Horizontal Lines: Community, tranquility, and calm.

As a civil rights organization, the Human Rights Campaign is a great example to consider when thinking about building community and peace. And the horizontal lines/rectangles used in the logo really help to communicate both equality and tranquility. 

Image Credit: Human Rights Campaign

7) Dual-Coding Theory

You’ve probably heard the statistic before that our brains process visual information 60,000X faster than text. Well, dual-coding theory is the idea that both visual and verbal cues can represent ideas, but using both can help the brain recall those ideas faster.

In other words, we need visual and verbal information to digest and remember information.

When designing, this means illustrating ideas as much as possible, while still using verbal messages to fully explain ideas.

In the example below, the graphic shows a visual, literal representation depicting primary, secondary, and tertiary colors. But to fully grasp the concepts, it’s necessary to pair the visual information with written (verbal) information. The dual-coding is what helps the reader truly understand the concept.

8) Cost-Benefit Analysis

Whether we consciously think it or not, every decision we make goes through a cost benefit analysis, which is simply the process of weighing the costs and the benefits of an action before we take it.

If the costs outweigh the benefits, we don’t take action.

As designers, our job is to make sure whatever we have designed has benefits that outweigh the costs. This means making our content as simple as possible for the audience while still fulfilling the goal of the content.

Think of a form submission on your landing pages. Say you want to offer your audience some top-of-the-funnel content like a template or high-level ebook.

When you strategize about getting users to fill out a form to claim this content, you have to remember to design your conversion process with your audience’ cost-benefit analysis in mind. In other words, don’t ask for more than you need. 

How do you use psychology to inform your designs? Share you thoughts and ideas in the comments below.

SEO can sometimes feel like it stands for “Something Extremely Obscure.”

As marketers, we’re responsible for staying on top of what can feel like endless Google algorithm updates. And if we fail to do so, we run the risk of not showing up in search for important target keywords.

But keeping pace with all of those changes isn’t easy. Thankfully, when it comes to achieving SEO success on your website, there’s one rule of thumb that remains a tried-and-tested technique: optimizing your website with relevant and targeted keywords.

By having a well-optimized site, you’ll start to see results like improved visitor quality, higher conversion rates, and in the end — more closed customers.

In this article, I’m going to cover how to add keywords to your website once you’ve already completed your keyword research. So before you dive in to this post, be sure to read this awesome blog post on how to do keyword research.

Got your keywords ready? Alright. Read on to learn what on-page SEO is, where to add those keywords to your website, and how to avoid search penalties. 

What is On-Page SEO?

SEO, or search engine optimization, is all about creating content, optimizing it, and promoting it. When we talk about SEO, we often talk about “on-page SEO” and “off-page SEO.”

What’s the difference? In short:

• On-Page SEO is what a site “says to a search engine.”
• Off-Page SEO is what “other sites say” about a site.

On-page SEO, or “saying something to a search engine,” means optimizing individual web pages so that they rank higher on search engine results pages. The term covers both the content itself, as well as the HTML source code — both of which can be optimized for search.

Off-page SEO, on the other hand, refers to external ranking signals like links.

Improving your on-page SEO can help your inbound marketing efforts immensely by helping you attract the right visitors to your website. You want to optimize your pages for search engines so they can understand who you are, what you do, and what you’re writing about. Again, when you improve your on-page SEO, you’ll help increase the organic rank of your website on search engine results pages (SERPs).

(HubSpot customers: Click here to learn how to use HubSpot’s on-page SEO tool, which is built right into the software.)

On-Page SEO Tips to Help Your Webpages Rank Better in Search

1) Start with an SEO audit of your website. 

Every time you add new site content, you’ll want to create that content with the specific keywords you’re targeting (1–2 per individual webpage) in mind. But if you already have a bunch of web pages published, then your first step will be performing an SEO audit on your current website.

An SEO audit will give you an idea of how SEO-friendly your website is overall. That way, you can update and optimize your current content for search starting with your highest-traffic web pages. The audit will also help surface any other issues you may have, like duplicate content, so you can address them immediately and start ranking better in search. 

Watch this quick video series to learn how to perform an SEO site audit in detail. It’ll cover how to check whether your site is being blocked by search engines, make sure your XML sitemap is working, monitor and improve site performance, spot and remove internal duplicate content, and check your site’s popularity and trustworthiness.

In short, here’s what you’ll need to do:

1. Export all of your site pages into an Excel spreadsheet.
2. Sort by the most frequently visited pages. (Learn how to sort in Excel here.)
3. Decide which keyword category each one falls into, and add that category into a column beside the page name.
4. Add another column in your spreadsheet to add more specific keywords that you want to add to that page. Keep in mind that they must be relevant to the content on that page, as well as terms your target audience would be searching for.

Here’s an example of what this might look like:

Once you’ve completed this process for all of your pages (or, if you have a ton of pages, at least the most important ones), then you can jump in to your site to start adding keywords.

Here are a few other helpful resources for performing SEO audits:

• Moz: “How to Perform the World’s Greatest SEO Audit“
• Search Engine Journal: “How to Perform Your First SEO Audit“
• Search Engine Land: “How To Do Your Own 5-Minute SEO Audit“

2) Add keywords (naturally) to 5 critical places on your website.

In order to optimize your pages for keywords, you’ll need to, well … include those keywords on your site. But not every placement of a keyword is equal: There are certain places on your website that are more optimal than others for on-page SEO.

Here’s a list of some of the most important places to optimize for your chosen keywords on your site:

• Titles
• Descriptions
• Headings & Content
• Images Titles & Alt Text
• URLs

If you haven’t optimized these sections of your site in the past, you have some work to do — but it’s up-front work that will pay off big time in the long term. To get the most bang for your buck, start with the pages that get the most traffic. Then, as you create more pages in the future, be sure to optimize as you go.

(HubSpot customers: Click here to learn how to figure out which web pages are getting the most traffic using the “Sources” report.) 

Titles

Titles are the HTML element used to describe the topic of a web page. You’ll find them in the title of a search engine result page (as shown below), and in the top bar of an internet browser.

Titles have a direct impact on both searcher clickthrough rates (CTRs) and search rankings. To make your title both search-friendly and click-friendly:

• Try to keep it below about 65 characters so it doesn’t get cut off on search engine results pages.
• Include one of your target keywords or phrases so it’s easier for searchers to identify that your results are relevant to other query — and position these keywords toward the front of the title to lower the risk of it getting cut off on SERPs.

Descriptions

Descriptions, also known as meta descriptions, are shown in search results below the title and URL, as shown below.

Descriptions can help increase CTR, but nowadays, they actually don’t have a direct impact on rankings. They’re there for humans, not search engine crawlers, and you should use them to tell searchers why they should click on your result. Use one of your target keywords or phrases in your meta description so they know your content is relevant to their query, but make it attractive to the viewer, too.

Bonus: You can use this cool tool from Dejan SEO to preview what your search result would look like before deciding which description to use.

Headings & Content

It’s important to use your keywords in your headings and content, as visitors are much more likely to stay on a page if they can see the terms they had searched for on it. Using keywords in your content is used by Google as a ranking factor, so doing this can help improve your SERP placement.

Just make sure you’re using these keywords naturally, since Google has gotten better and better at being able to tell when people are keyword-stuffing their content. Whenever you create content, focus on what matters to your audience, not how many times you can include a keyword or keyword phrase in that content. If you do that, you’ll usually find you naturally optimize for important keywords.

While it’s fine to use keywords in multiple locations on your site, don’t overdo it or Google will demote your web pages in search results. (And hey, no one wants to read content like that, anyway.)

Image Alt Text & Titles

You can also look at including keywords in a natural way in your image alt text and titles. Both alt text and titles are attributes that can be added to an image tag in HTML. Here’s what a complete image tag might look like:

<img class=”alignCenter shadow” src=”image.jpg” alt=”image-description” title=”image tooltip”/>

An image’s alt text tells search engine crawlers what an image is about, which helps it be found in search. It’ll display inside the image container when an image can’t be found, and it also improves accessibility for people with poor vision using screen readers.

An image title tag, on the other hand, is shown when a user hovers their mouse over the element — kind of like a “pop-up.” It won’t be shown to the user when an image can’t be displayed.

(HubSpot customers: Click here to learn how to add alt text and title text to your images in HubSpot.)

Adding keywords to these image attributes may seem minor, and truthfully, it isn’t going to impact your search rankings as much as other things on this list. But trust us, it’s worth the extra minute (if that) it takes to change the name from “IMG23940” to something accurate and descriptive. 

For example, if you were to write alt text for the image below: 

• Bad: alt=””
• Better: alt=”puppies”
• Best: alt=”golden-retriever-puppies-in-basket”
• Avoid: alt=”puppy-dog-baby-dog-pup-pups-puppies-doggies-litter-retriever-labrador-wolfhound-setter-pointer-basket-wicker-basket-box-container-straw-grass-green-nature”

URLs

It’s a good idea to include keywords in your URL if they accurately describe the page contents. This is particularly important for businesses that do a lot of blogging — there’s a huge opportunity to optimize your URLs on every post you publish, as every post lives on its own unique URL.

But beware: Search engines will penalize exact match domains that are keyword stuffed. So if you’re thinking of starting up arizonerealestaterealtorsinarizona.com, think again. Keep it to http://ift.tt/1h9hpzg, and you should be fine.

As always, keep reader-friendliness in mind when you’re creating your URLs. Overall, your URLs should make sense to humans and give them a good sense of where in your website they’ve landed. You should also separate words with hyphens and remove extra words (like “a” and “the”) in the page part of the URL slug.

3) Learn to avoid search penalties.

There are a couple of things you should also avoid when optimizing your site for keywords, so be careful of the following sketchy SEO practices some people (mind-bogglingly) still use.

Never hide keywords.

This includes using the same color background as you do for the text, hiding them behind images, or hiding them off to the side using CSS. (I know, I can’t believe I have to say it.) While this isn’t as easy to catch as other black hat tactics, today’s more sophisticated search engines can easily find instances of hidden keywords — and it can result in serious search penalties.

Avoid keyword stuffing

Keyword stuffing means repeating keywords over and over again in the text, whether it’s in titles, headings, descriptions, page content, URLs, or even at the bottom of a web page in very small text. Basically, when it looks like keywords have been added unnecessarily onto a web page, it’s probably keyword stuffed.

Keyword stuffing is the oldest trick in the book when it comes to SEO — and nowadays, search engines have been developed specifically to detect it. Not only does it look spammy, but it’s not approved by search engines and will result in penalties. 

Don’t force keywords where they don’t belong.

This isn’t quite the same as stuffing a lot of keywords into a post. This is more about not forcing a keyword in — even if it’s just one — if it doesn’t belong, contextually speaking. If you can’t figure out a place to put a keyword in a piece of content, it’s often a sign the content isn’t that well-aligned with what your personas need, anyway.

Remember, SEO is not about incorporating as many keywords as possible. It’s much more about picking content topics relevant to your target audience.

4) Promote a good user experience.

The most important thing to consider is your visitor’s user experience. While optimizing your website for an algorithm sounds purely scientific, remember that the goal of search engines is the deliver the best experience possible to their end-users: searchers. If you keep that goal in mind with your SEO strategy, you’ll be more likely to make good choices. Think about humans first and search engines second, and you’ll be alright.

We know you’re a busy marketer with a lot of things on your plate. SEO need not fall to the bottom of your priority list because of lack of knowledge — or, worse, fear you’re doing it wrong. We hope this was a helpful starting-off point for your on-page SEO efforts. Happy optimizing! 

Editor’s Note: This post was originally published in February 2014 and has been updated for accuracy and comprehensiveness.