This article originally appeared in the October/November 2019 issue of Canadian Music Trade magazine.
By Michael Raine
Since becoming the lead designer at Inbound AV, Madison Revell has had the pleasure of working with a number of MI retail and pro audio companies on their websites. This work has given her an appreciation for the musical products industry and its people, but also an awareness of its weaknesses when it comes to web design.
“You have these businesses driven by people who are very passionate and very good at what they do, and they’re pouring a lot of time, resources, and money into driving people to a website where they can either be educated about the company itself or purchase products or services; yet, they don’t put any effort into their website, or they do but it’s very underwhelming,” she says. “If you’re spending time, money, and resources to push people here and they’re leaving within 10 seconds, then that’s really hurting you. You can have the most amazing product or service, but if you’re not showcasing it well, it’s not going to do anything for you; it reflects poorly on your brand itself.”
With that in mind, Revell gave a standing-room only NAMM U presentation at the 2019 show in Anaheim focusing on the top five website problems she commonly sees. It was so well received that she was back for an encore at this year’s Summer NAMM. And so, for those unable to see her in person, Revell was kind enough to share her insights with Canadian Music Trade.
Problem #1 – Too Much Content
“This is probably the most common one I see as a designer. That’s because there is so much pressure to keep people on your website, a lot of people feel the need, and also desperation, to showcase everything that they have right off the bat,” reveals Revell.
In reality, when the website’s homepage is overloaded with content – both text and images – it overwhelms the visitor and drives them away. “We live in a day and age where people want to scan and they don’t want to read. They want to get information as quickly as possible and if you have a giant paragraph or two talking about something or you’re throwing too many products or services at someone, if it’s too much information, it’s going to really turn them off,” Revell notes. “I refer to it as ‘tabloid syndrome,’ when it’s almost this assault of information being thrown at you and you don’t know what to prioritize or what’s most important because it’s just all coming at you so fast. It’s something that a lot of websites, unfortunately, suffer from.”
The solution is white space, or breathing room, by prioritizing quality over quantity. The way to approach that is to create bite-sized information and strip away the surplus content from the homepage. “Then really adhering to a content hierarchy,” Revell adds. “That is basically just making your brand obvious. You want your identity to be portrayed very clearly. Choose the main thing you want to highlight right off the bat, and then you can go down from there. That way, you don’t have these pieces of content that are competing with each other but rather complementing one another and supporting one another.”
Then, using “call to action” buttons, such as Learn More, Get Started, or Buy Now, you can drive website visitors to other pages for more information.
Problem #2 – Wrong or Confused Messaging
“It can come in a couple different forms. The first form is when the written content is confusing or misleading. A lot of times, people have these catchy headlines or slogans, which are good for grabbing attention, but when you actually get into the detail of it, it doesn’t make a whole lot of sense; it doesn’t really connect with what the business or brand is trying to portray, or their products or services,” Revell explains. “It leaves customers feeling a kind of disconnect because either they feel like they’re not in on the joke, so to speak, or they’re just thinking, ‘OK, not a whole lot of attention has been paid here and they’re just kind of throwing it out there and not caring much about it.’”
The other form is confusing images. It seems obvious, but any photos or graphics should make logical sense for the company/brand and for how it’s being used on the website. “You can have a gorgeous photo of mountains or a landscape, but if you’re selling guitar picks or amps or something that has nothing to do with a mountain range, it’s going to leave people wondering why that’s there,” she says. “What that does is trip people up, and instead of thinking about your product or services, it has people wondering why this is here and the amount of attention they’re paying is less on you and more on why something is confusing… It really disengages them from what you’re trying to accomplish.”
Part of the key to avoiding this mistake, and really many of the mistakes mentioned in this article, is clearly identifying the demographic you’re serving. If you know their age, income, interests, hobbies, etc., then you know how to talk to them.
Problem #3 – Inconsistency
It’s all about the little things, which individually may not seem like a big deal, but they can add up to the website feeling and looking sloppy. It’s inconsistency in the size of images, the font type or size, paragraph sizing, etc.
Choose a legible font and size for headlines, subheads, and body text and keep them consistent through the entire website. Same goes for the width of paragraphs, borders on images, etc. For pictures, only use high-resolution photos. For colours, choose a limited palette – Revell recommends a main colour, secondary colour, and two neutrals – and use those consistently as well.
“Honestly, this is one that makes me excited as a designer, because it is a very tedious point. It’s in the little things,” Revell says. “What’s hard to understand is that it’s not always something that people identify as an issue, but subconsciously it bothers them and something looks off, even if they can’t put their finger on it. As more inconsistencies show up, it starts to build and it becomes more and more of an issue if it’s not addressed early on.”
Problem #4 – Unresponsiveness
An unresponsive website is one that appears the same on a desktop browser as it does on a phone or tablet. Obviously, given the screen size and difference between a touchscreen and mousepad, how people prefer (and expect) to navigate a website is very different across different devices. A good website is designed to adapt well to each. After all, we live in the smartphone age, so many visitors – maybe even the majority of them – will view your website through their phone instead of a computer.
“There is an astounding number of clients who are told that their website is responsive, but they never actually go on their phones and look at it,” she says. “It is always important to actually check and use it for yourself as if you were a customer. Sometimes, for example, those call-to-action buttons won’t necessarily look like a button. On a desktop, you know that it’s there and you can click it and go through, but on mobile, it doesn’t always communicate that you can actually touch this button and it’ll take you here and do this. Visual cues sometimes get lost in that translation, so it’s always important that you have a really comprehensive, responsive website.”
Problem #5 – Poor Navigation
“Navigation takes on many forms and unfortunately people can get lost in a website. It goes back to time – when it takes someone too much time to find what they’re looking for, they’re going to disengage, because they’re only a Google search away from someone else who is offering something similar. So, navigation is huge,” Revell emphasizes. “The whole point of being online is to reach a wider audience and if you’re frustrating that audience, it’s going to leave a bad taste in their mouth about your brand as a whole. That’s why this is so essential.”
The point is to provide a clear map and help people move through the website. Really think about the layout of the navigation bar at the top of the homepage. What are the main things people will look for on your website, and what should be most readily available? What’s a logical way to organize those pages?
Also, Revell reiterates the point about being scan-friendly. A quick scan of the home page and navigation bar should clearly show the visitor how and where to find what they’re looking for. Also, use icons, CTAs, sliders, arrows, a search icon, and underlined text links as visual cues. For instance, a little shopping cart icon in the top right corner of a website immediately indicates that this is an e-commerce site and you can buy products. Underlined text indicates it’s a hyperlink. A magnifying glass icon indicates you can type in a search word.
“Using these visual cues and keeping them clean and consistent really helps as far as easy ways people can implement navigational cues into their website,” Revell adds.
Michael Raine is the Senior Editor of Canadian Music Trade