First thing’s first: I’m not going to bash popular designs. However, I will be pointing out some commonly-found negatives about them that can be fixed or at least addressed.
All websites should be primarily focused on the user’s experience. The user could be an end-user at home at their desk in their PJs, or your content manager regularly updating the website with new blog posts. Without the user in mind, the design falls apart and the website becomes essentially useless. It looks nice, but has no practical purpose. How can a website look awesome, but still be bad? Well, it depends on your website and what you provide for the user. There are numerous popular designs out there today that have common problems associated with them that many designers simply don’t consider.
Popular Design Trends
Soon, Inspiredm will post its annual web design trends from Cubicle Ninjas. So I’ll leave the in-depth look at trends to them, but we’re going to look at some of the trends that are found all over the web today. Here are the 3 popular design trends we’re going to cover:
- Infinite Scrolling
- Parallax Scrolling
- Mobile-first Designs
Problems with Infinite Scrolling
Infinite scrolling is when a page loads content continuously as you scroll down the page. For pages that are intended to display images of past work, this can be a tool to consider; however, there are some problems with infinite scrolling that many web designers don’t truly consider, such as:
Photopin demonstrates how simple issues can be solved with a simple search box, sidebar, and a quick “up” button to go to the top.
The Scroll Back – Take this as an example: a website implements a blog (side note: every website should) and decides to use infinite scrolling to keep users on the page to browse other blog articles. In theory, it makes sense; once you get to the bottom of the first page on a blog, you may think “Well, they don’t have what I’m looking for” and move on to the next site. With an infinite scroll, they will likely have a longer on-site time. Well, consider a loyal reader that’s there, a good bit down the page that is looking for this one article you wrote recently. Scrolling back up can be annoying and provide a poor user experience.
The Fix: A simple “to top” button would solve this problem fairly quickly; however, if the user wants content in the middle of the page they’ve been scrolling through, they now have a problem. In cases like these, a search feature should be clearly displayed in the header, which should be following the user as they scroll. In most cases, this problem is unavoidable unless the user knows the content’s wording as you have it written.
The Daily Beast handles this issue beautifully with infinite scrolling that not only tracks progress on the page, but allows you to click to different articles via a right-hand nav bar. Additionally, for SEO friendliness, Title tags and URLs change as you move down the page to new articles. As you can see in the image below the read this list not only displays other articles that might be of interest to you, but it also shows how far you have gotten in the article by displaying a progress bar.
Too Much Content? – Yes, there is such a thing. On an e-commerce website, for example, you could list 300 new computer monitors. If you have a monitor in mind, it would be an absolute pain to find the monitor you’re looking for without the use of other filters. The same can be said for any type of listing website, such as a directory when you are looking for that one company.
The Fix: An option to switch infinite scrolling “on” and “off” on e-commerce websites that are listing numerous products is a good thing to consider. A “Read More” button is a popular option that works smoothly. Some users prefer the classic searching options. Another useful option is to include as many filters as possible, including brand, price range, review ratings, and any specific specifications that relate to your product.
Problems with Parallax Scrolling
Parallax designs have caught on significantly in the past 2 years. The websites are absolutely beautiful and normally function great. From the user’s perspective there’s little wrong with it and can usually lead to a loyal visitor. But parallax websites don’t come problem-free either, so here are some of the problems designers often forget about parallax:
SEO – There is a good bit of debate around whether parallax scrolling truly affects your SEO; however, it is worth mentioning. First of all, this theory came about when a study that showed most parallax websites ranked poorly for their core search terms. It should be noted that there is a lot of reasons why a website would rank poorly and the web design is simply an aspect (albeit a major one at times, but one aspect nonetheless) of SEO. The most important piece that a lot of designers don’t think about is the readable text on the page. I don’t mean readable by human eyes; I mean readable by search engines. If your parallax site is simply one page of content, images, and pretty colors, then that’s fine…just make sure your content is not an image. Google can’t read the words in the images! (Yes, this includes infographics.)
The Fix: Simply make the content actual text. Use images for design purposes only, not to display content itself, unless you’re looking for social media shares.
That Pesky Footer – Yes, we’re back at the footer problem again. Most parallax websites go on for an awfully long time, which can be entertaining (and in my experience, usually is), but that doesn’t mean that’s always the case. In fact, some people are looking for the information at the bottom of the page, which shouldn’t be so difficult to access. If you use parallax scrolling in a one-page website, consider everything the user would want and make sure it’s easily accessible.
The Fix: See “The Fix” for the Footer section under “Infinite Scrolling” above.
Load Speed – As a common concern among many moving designs, it often requires moving images. Moving images take longer to load and a long parallax page using lots of images can take significantly longer than most people are willing to wait.
The Fix: See this article I wrote on how to improve your website’s loading speed.
Problems with Mobile-focused Designs
A few months ago I wrote an article on designing for touchscreens which talked about designing for one device while not designing for another. The same goes for screen sizes. Responsive designs are now commonplace and there are very few cases a responsive design should not be implemented. However, responsive design doesn’t fix everything about your user’s experience; it just fixes the size.
The One and Only Problem – There’s really only one problem with mobile-focused designs. Everything on your website from the images to the text can be mirrored from the desktop version to the mobile version. That’s great and all, but is that really what you want on your desktop version? Yes, designing for mobile is what you want, but all aspects of your mobile design do not translate smoothly to your desktop.
What aspect am I referring to? Your content. From the content length to the organization, all of it is simply…off. The problem is simple: your content does not look right on your desktop version. Actually, it can look plain terrible if done poorly. The primary concern is truly the length of the content. On mobile, what seems “long” is really short.
The Fix: There are 2 options here. The first and least efficient option is to make 2 separate websites: 1 for mobile and 1 for desktop. This would certainly solve most of your problems, except then you have 2 sites to manage and not just 1. The better option would be to simplify your design and the content involved. Organize the content and add images to push your point or help sell your product. Not only do people like seeing images, they also take up a good bit of space on a desktop version, while still serving the same purpose on each.
Web designers often implement designs without thinking about all of the consequences of that style. In a lot of cases, the web design you choose could devastate the company by causing a poor user experience (UX), resulting in a poorly performing site. Be sure to check out all of the pros and cons of a design and test it out with users and get some feedback before making this new design live.
Author Bio: Ryan Gavin is an associate of Ignition72, a Maryland web design agency. He loves finding new websites with great designs and other designers that do their job well and love it. He feels that without a web designer, a website is rarely successful.
Feature image curtsey of @design