The longer you design websites, the more some things become second nature. You know you have to test different things to make sure they function appropriately, and you understand instinctively when something looks good versus when it doesn’t. However, with familiarity also comes the likelihood you might forget a few website elements that make it more enjoyable to the user.

There are more than 1.7 million websites on the World Wide Web. While not all will be direct competition for you, that is still a lot of noise to sort through. Capturing the attention of those who land your page isn’t an easy task, so ensuring you have a few basic features in place helps engage them.

There are some website elements that you shouldn’t overlook no matter what type of site you create. You may already be familiar with some of these basic features, but others may surprise you. Use the following as a sort of checklist when considering what to put on your pages.

Jump to: Predictable Navigation | Custom 404 Page | Negative Space | Button Styles | Responsive Images and Text | Shorter Forms | Site Speed | Type Hierarchy | Content LocationHigh-Functioning Footers | Web Animation | Calls to Action

1. Predictable Navigation

You need some form of navigation on your website, but it’s tempting to try something cutting-edge and new. Perhaps you’ve hidden the menu and the user has to hover over a certain spot to find it. The problem with new techniques is that people expect navigation to be located near the top of the page and even to have a specific order.

For example, the Contact button is usually to the right and the Home button to the left of the navigation bar. When you get too out of the norm, users may grow frustrated and leave your site. Strive for a more predictable and easy to find navigation hierarchy.

Unspun creates custom jeans for those who want a more personalized fit. Notice while their navigation doesn’t rest horizontally across the page, it still appears near the top and takes on a predictable structure. The most important element appears first, and they also include an “About Us” section as a trust factor.

Takeaway: Navigation doesn’t have to be horizontal, but it does need to follow expected patterns. Avoid making it difficult to find, and don’t add in things users don’t care about. Include common locations such as Home and Contact links.

Back to Top

2. Custom 404 Page

Have you ever visited a website and when you tried to go to a specific page — perhaps one you saved previously — you bounce back to the home page? There are few things as aggravating to users as not being given the 404 error. However, you should definitely customize your 404 pages. Some options include a funny message and a redirect back to the home page or a list of search results similar to the page the person went to. It could just be that your internal navigation changed a bit and what the user wants has a new address.

However, you should definitely customize your 404 pages. Some options include a funny message and a redirect back to the home page or a list of search results similar to the page the person went to. The issue could just be your internal navigation has changed a bit, and the user’s desired destination has a new address.

Your 404 is your chance to entertain your users, show off your personality and guide them to a central location. Without a strong 404, you risk them leaving and never returning.

Back to Top

3. Negative Space

For a design to be visually pleasing, you need a nice balance of positive and negative space. However, as a website grows, it is easy to come up with a very cluttered page or sidebar that distracts the user from the main purpose of the page. Take a step back from your computer while designing and think about what you’d like to accomplish with the page. Then, remove any website elements not meeting the goal.

Back to Top

4. Button Styles

You already know a button needs to tie into your overall color palette and contrast with the rest of the page. But have you thought about different styles and how to deliver them best? What happens when the button is static? What are the changes when someone hovers over a button? How can you include some motion in the hover action so the user is engaged?

Finally, think about what happens when the user clicks on the button. How does the person know their click was successful?

Access Lift uses a CTA button color contrasting with the rest of the hues on the page. The bright orange reflects the construction industry but also pops against the darker blue background. Placing the button in the middle of the page just above the fold also draws the user’s attention.

Takeaway: Your CTA button should pop. When a user lands on your page, the first thing drawing their attention should be what action you want them to take. Use contrasting colors and bold edges to make the element stand out.

Back to Top

5. Responsive Images and Text

More people use their mobile devices to access the internet. Around 92% of Facebook’s ad revenue now comes via mobile. That is a huge shift in advertising and usage that is almost certain to translate over to website elements and design.

Make sure all your layouts are responsive to mobile. Some developers now go with a mobile-first design and adapt it to desktop devices. While the world might not be ready to give up their desktops, at least balancing between the different screen sizes expands your potential customer base.

Back to Top

6. Shorter Forms

Do away with lengthy forms on your site. People don’t have the time, patience or incentive to fill out endless amounts of information. Those on mobile devices have difficulty filling out forms. You’re much better off asking for a few pieces of information, such as name and email, and then contacting the lead if you need more. Adding forms may or may not be essential website elements, but their length can make or break your conversions.

Look for ways to make filling them out easier, too, such as linking the user up through a Facebook or Google account with a single click.

Back to Top

7. Site Speed

You’ve probably heard people’s attention spans are shorter than they’ve ever been before. Blame the instant access to Alexa or our culture of getting everything immediately, but if your site doesn’t load in a few seconds, you risk losing visitors. You might not think of speed as a feature of your website, but it is arguably one of the most important unseen factors in how well your page performs.

In a survey of 750 consumers and 395 marketers, researchers found around 70% of people say page speed makes a difference in how willing they are to purchase from an online store.

Back to Top

8. Type Hierarchy

Your website should have a typography hierarchy. Limit yourself to a couple of fonts that work well together and then figure out the size and weight of each of your website elements, such as the H1 and H2 headers. How is italics or bolded font handled? What are the colors of the type, and how do they work with the background?

You might think this all comes naturally, but without the right contrast, your text may be difficult to read for some users. Spend time on your typography hierarchy, and your site visitors will thank you.

Spotify’s Pet Playlists uses an excellent hierarchy system. They go with a sans-serif design to give the page a more modern look and better match the brand’s logo. There is a clear hierarchy, where the headline is much larger and bolder than the other text on the page. Note the CTA is in a different color text to set it apart.

Takeaway: Choose fonts that make the most sense for your business model. Ensure headings and subheadings are larger and bolder than the rest of the text to draw attention to important elements. Use fonts that mesh well together, such as two sans-serif or two serif fonts. All typefaces portray a particular mood, so choose your typography carefully.

Back to Top

9. Content Location

While planning your website’s layout, you should think about what types of content you’ll have and where it should be located. For example, if you plan to have some written tutorials, a blog would keep your landing pages uncluttered while still offering users valuable resources.

On the other hand, if your site is mainly content-driven, then you may wish to place your articles on the main page and feature some images from each of them in thumbnails. Thinking through both the content you plan to start with and what you’d like to add later can make your site’s growth seamless.

Back to Top

10. High-Functioning Footers

Many designers throw up a footer as an afterthought, including a copyright notice and maybe some contact information. However, users often scroll to the bottom of the page to locate contact information. What if you used your footer for more than just a placeholder? What if you used it to grab user attention and direct them to action? Perhaps you could include some social media buttons, so people can interact with you on those platforms?

Think about what you’d like to see in a footer and try out some different combinations until you hit on one that tests successfully with your visitors.

Back to Top

11. Web Animation

While web animation may not be something you think about as a necessity for your website, it is a fun way to draw user interest and engage them once they land on your site. Animation takes a static page and turns it into something exciting. You can use basic website elements such as hover motion to encourage clicking on a specific call to action (CTA).

Pest Stop Boys adds some animation to their page and engages the user from the first moment. As the user moves their cursor over the landing page, different areas come under the spotlight. Then, a roach runs across the screen. If the animation doesn’t convey you need their help getting rid of your pest problem, then you are in the minority. The graphics trigger an emotional reaction to avoid creepy crawlies.

Takeaway: Animation can engage your user and keep them on your page longer. However, it must tie into your business’s purpose. It also needs to speak to why the user came to your site in the first place.

Back to Top

12. Calls to Action (CTAs)

A strong CTA draws your user to take a specific action. It captures attention by standing out in bold accent colors and appearing slightly larger than some of the other website elements. Pay close attention to the CTA’s wording, and use action verbs and first and second-person phrasing whenever possible. Try to avoid common CTA words, such as “submit,” and go for something a bit more original but still descriptive, such as “Get My Free Report.”

Back to Top

 

 

Create Consistency

While it’s important to stay up to date and show your site isn’t ignored, it’s also important to create a consistent image users can rely on. They should know when they visit a business’s website that there will be certain information available and it will be found within specific links. Even when you update the site, you shouldn’t change the basic underlying structure of navigation and other important website elements.

 

 

This article was originally published on 8/26/2019 and updated on 4/22/2020.

About the author

Lexie Lu

Hello! My name is Lexie and I have a fervor for design, writing, and coffee. I graduated with a dual major in Creative Writing and Commercial Design, and through those grueling study hours (facilitated by coffee, of course) I always found time to write for myself.

My posts feature design trends throughout all industries and show how the field is always changing. There’s never a dull moment in the design world!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.