web-design tip

Remove distractions and reduce friction

Certain elements on your website are going to detract from the value and message you're trying to convey. Complicated animations, content that’s too long, and “stocky” website images are just a few examples. With an audience that only has an attention span of eight seconds, you need to make it abundantly clear what your user will learn on the page they're viewing and your design must not detract from this. This starts with making sure you have consistent brand guidelines you can work off of. This should detail your font styles, colors, imagery, iconography, and logo usage. Without this, it’s easy for brands to struggle when designing pages. You’ll likely start to see arbitrary colors and varying font styles and sizes used, which in turn, can distract from your message or create visual confusion for people trying to convert. When looking at this site, the first thing I noticed was the colors. For one thing, the way they are used makes it hard for the user to decide where their eye is supposed to go. Should it be one of the two red buttons? What about the hello bar? Or maybe the top of the navigation? You need to figure out where you want users' attention to go when they arrive on the page and what order it needs to flow naturally. This current color arrangement creates friction in accomplishing this. Second, there are some areas of inconsistent spacing. The hanger in the hello bar (‘you!’) creates a second line that could easily be fixed if the width of the container around the text was increased. The H1 also isn’t exactly vertically centered in the white area, drawing your eye to “issue” rather than the bulk of the message. Above we have Communication Square, another company in the IT space. At first glance, this website utilizes a much cleaner look and feel with less bold colors and more white space. The hero image overall offers little room for distraction. The fact that the hero image itself isn't too detailed and is masked with a white overlay allows the content to stand out, rather than it disappearing into the image. Details like this really help make or break your overall website experience and help your users better understand what you want them to do, leaving less room for confusion.