Mythbusters: Website Edition

As a web designer, I routinely speak with business owners and marketing managers who are in the midst of a website redesign project for their company. During these conversations, I am always amazed by the myths about user experience and interface design that they mistakenly cling to. Many of these misconceptions are the by-product of previous website projects – leftover relics from an Internet of old. Others are more baffling, as their tenets are not now and never were true. So in the interest of championing the best practices and principles of modern website design, we’re channeling our inner myth busters and blowing the lid off five of these most persistent myths (dramatic explosions not included):

Myth #1: Visitors need/want instructions on how to use your site.

The Internet is no longer a new and unfamiliar medium, yet many companies still populate their websites with content that seems targeted to someone who has never actually navigated the Web before. When you include instructions for visitors about how to use to your website, you are adding a lot of extra words, which in most cases only serve to weigh down your pages with unnecessary visual clutter. In fact, the goal of any good design is to create an interface that is so intuitive that no instruction or explanation is necessary to help visitors move from one page to the next and complete routine processes such as making a purchase or signing up for an account. As a result, if you feel instructions are necessary, that inclination is a major red flag for serious design flaws that must be addressed in order to provide a quality experience for your user. To be fair, there are certainly instances where some level of guidance is needed. Complex interactions or applications that are truly unlike anything that has come before on the Web will require some level of training for your users, but the vast majority of websites do not fall into this category. If your site is, well, just a website (and there’s nothing wrong with that!), forego the instructions and have faith that your users are savvy enough to know and understand the well-established conventions of using the Internet.

Myth #2: These days, everyone has a high bandwidth connection.

Over the last few years, the average size of a webpage has doubled, largely due to our profuse use of images. Current design trends that call for giant, page-spanning photographs combined with the drive to deliver high-resolution images for retina displays mean that the file size of the images we are using continues to climb. Many people argue that this is acceptable because, as the size of our webpages grow, so does the bandwidth speed of our Internet connections. But is this really the case? It is true that the number of people with access to high bandwidth connections continues to increase, but the belief that all visitors have the benefit of a lightning-fast connection is nothing more than wishful thinking. There are still many areas of the country and the world that are shackled to the type of slower connections that are only a distant memory for many of us. Also, keep in mind as well that mobile visitors may be operating on a network that is either unreliable or has data download limits. In both of these instances, a website that is bloated with large content (i.e., giant videos, unoptimized images, etc.) will pose a problem. Ensuring that your website is optimized for performance is as important today as it has ever been, regardless of how fast connection speeds may be. After all, no one has ever said, “Wow, this website loaded TOO quickly for me!” Better performance and faster downloads improve the quality of experience for all users.

Myth #3: There may be some users visiting your site on a mobile device, but not that many.

Years ago – when the iPhone was still a novelty and everyone and their 12-year-old brother didn’t walk around with a smartphone in their pocket – this may have been the case. But today, visitors are accessing your website on a wide variety of devices with a range of different screen sizes. Examining the hundreds of websites that we manage reveals that an average of 30 percent of all traffic to those sites comes from mobile devices of one kind or another, and for some, it’s as high as 50 percent or more. This is consistent with the forecasts of industry analysts, who predict that by 2015 – that’s next year, folks! – the majority of all Web traffic will come from mobile devices. Additionally, not only are visitors accessing your site on mobile devices, but the same visitor is likely using multiple devices to access your content. We call this the “muti-device user”. As we covered previously in our article “Website Design for a Multi-Device World”: The multi-device world is populated by multi-device users. While a staggering variety of devices are, indeed, being used to access web content today, it’s also important to remember that the same user is often using multiple different devices to access your website – and they expect that site to work well regardless of which device they happen to be using at the time. Gone are the days of “mobile users” coming to your site only to locate your phone number or directions to your office. Today’s mobile users – and multi-device users – expect convenient, on-demand access to the same content that they can find on the desktop version of the site. Clinging to an outdated belief that “no one has a reason to visit my website on a mobile device” will quickly translate to “no one has a reason at all to visit my website at all.” Read more: Website Design for a Multi-Device World

Myth #4: You should open off-site links in a new tab/window.

This is the most common myth that I hear from clients, who insist that all links that lead to another site must open in a new tab or window. This request stems from a belief that if a visitor leaves your website to look at content somewhere else on the Web, they will never find their way back. By opening that link into a new tab, your website remains open in the user’s browser for them to return to at any time. Or at least, that’s how it works in theory. Unfortunately, I have seen this practice backfire on a number of occasions. Why would this be the case? Think of the Web as a linear experience. You move from one page to another and another. You can travel seamlessly to and from any point along  this timeline by using the browser’s back and forward buttons. But when you open a link in a new tab, you start a new timeline for the user. Having observed many website users over the years, I can tell you that the back button is a feature that they are intimately familiar with. If that user clicks a link and visits a new page, and they then want to return to your site, they will intuitively click the back button until they get there. However, if you’ve opened the off-site link in a new tab or window, then the back button eventually leads to a dead-end for that visitor. Your site, which they want to return to, is not part of their current timeline because it is open in a completely separate tab. Of course, all the user needs to do is close the current tab, and your site will be in front of them again, but I’ve seen many visitors who are unaware of or confused by this. Instead, when the linear experience of the back button doesn’t bring them to your site as they expected, they instead type your website’s URL into the browser’s address bar, thinking that something went wrong along the way. They now have two instances of your website open, so in your efforts to “help” them easily get back to your site, you’ve actually confused the user experience. Does this mean you should never open links in a new tab or window? No, it doesn’t. For example, it’s a good practice to open PDF files in a new tab because these documents feel like they are separate from the linear experience of browsing a site. Additionally, opening links in new tabs is not “wrong,” per se. It is an acceptable solution, but if you choose to use that approach, do so for a reason other than the mistaken belief that if visitors leave your site, they will never find their way back. The linear experience of web browsing – and using the back button to return to a webpage – is a well-understood convention, so don’t be afraid to let your visitors explore in the manner that is most natural to them.

Myth #5: Visitors absolutely will/absolutely will not complete a form.

The final myth we will debunk concerns web forms. Interestingly, I hear competing opinions from clients regarding forms on their websites. Some believe that visitors will not fill out a form no matter what. Others think that their users will gladly complete a lengthy questionnaire for almost no reason at all. As usual, the truth lies somewhere in the middle of these two extremes. Gathering information from website visitors is a valuable exercise. It allows you to understand who is coming to your site so you can follow up with them, engage with them and hopefully convert them into paying customers for your business. Just asking for visitor’s information is not enough, however. Very few people will be willing to complete a form unless they have a clear understanding of what they will receive in return – and what they receive needs to be of greater value to them than receiving more marketing from you. This value can come any number of different ways, such as receiving a free whitepaper or application download or registering for an event or webinar. In each of these cases, there is a legitimate reason for your site visitors to complete a form that gives you their personal information. If, however, your form simply says, “Sign up for updates!” without any further information about what those updates entail, how frequent they will be delivered or what potential value they hold, then there is a slim chance anyone will be inclined to complete that form. Creating a valuable offer is step one. Step two is the design of the form itself. Asking for too much information will be a roadblock for many visitors, who will either perceive a form with a large number of fields as being too cumbersome or too intrusive to complete, so the best course of action is to ask for only the information you need. If you never intend to call someone, then don’t ask for their phone number because that’s one less obstacle you’ll have to overcome. The more concise and easy your form is to complete, the more likely your visitors will do so. Website visitors will fill in forms, as long as you make those forms easy to complete and provide value to them in exchange for sharing their information with you.

R.I.P. myths and misconceptions

The Web and the behavior of its users are constantly evolving. Since the last time you engaged in a website redesign project, there have undoubtedly been a number of shifts in trends and tendencies, and what you learned through that experience even just two or three years ago may not be applicable today. Because of this ever-changing landscape, the importance of working with web development firm that keeps pace with these changes and the best practices of modern website design cannot be understated. Such a partnership will ensure that the decisions driving the the design of your site are relevant to today’s Web and are not relics of a time gone by.

---

Website Design for a Multi-Device World

The array of devices through which people interact with online content is larger and more diverse today than ever. To underscore the point, try this little exercise – take a look around your house and find every device you own that can access the Web. For me, the list looks like this:

• Desktop computer
• Laptop computer
• Netbook computer
• iPod touch (x2, each a different generation)
• iPad
• Kindle (x2, each a different version)
• Android phone (HTC EVO)
• Gaming system (wii)

Each of these devices has a different screen size, and the experience of accessing web content is different on each.

That’s why, if you want to ensure that your website will provide an experience that truly engages your audience, it must be designed specifically for this multi-device world in which we all live today.

The multi-device user

The multi-device world is populated by multi-device users. While a staggering variety of devices are, indeed, being used to access web content today, it’s also important to remember that the same user is often using multiple different devices to access your website – and they expect that site to work well regardless of which device they happen to be using at the time.

To illustrate this point, let’s consider the scenario of an average everyday activity that occurs on the Web: mom planning the family vacation.

As she starts her day, she does a quick search on her iPhone and starts to peruse a few sites that strike her interest as she enjoys her morning coffee. Later she takes advantage of her lunch break to continue her research. She visits many of the same websites as she did before, this time reading more and delving deeper each one now that she’s seated comfortably in her chair behind her desk and has more screen real estate to work with. That evening she shares her findings with the family, flipping between sites on her iPad as they unwind on the couch. In each instance, she visits many of the same sites, and she expects them to perform just as well no matter which device she has in front of her.

More than just mobile phones

You have likely been introduced to the concept of “mobile websites” and have been told that your company needs one, but as the scenario above illustrates, the multi-device landscape encompasses much more than just large desktop monitors and small handheld phones. There are many devices and screen sizes in between, and your website must be equipped to work well on all of them. That’s why a separate “mobile-only” site is not the best way to serve the needs of the multi-device user.

A mobile-only solution relies on technology that detects when your website is being accessed via mobile phone and redirects the user to a completely separate version of your site – one designed specifically for the typical screen size of a smartphone. These mobile websites often feature less content and fewer features in order to minimize both navigational complexity and load time.

The problem with the mobile-only approach is that it only addresses the needs of one specific type of device. Large desktop computers get the “normal” browsing experience while mobile phones get a smaller, more streamlined version.

But what about the multitude of devices that fall between these two extremes? How do we serve them effectively?

Going responsive

There are a number of deficiencies with a mobile-only approach, but the inability to serve today’s broad array of devices is the most detrimental.

If the mobile version of your website offers less content and fewer features than your desktop site, you run the risk that a user will be looking for content that you have decided to eliminate from your slimmed-down mobile site. This is a problem, because when a user comes to your site looking for something specific and they can’t find it, their natural response is to go looking for it somewhere else – which usually means your competitor’s site.

After all the effort your put into attracting users to your website, anything that drives them away – like a user experience that is not optimized for the device they are using – runs counterproductive to your goals. So how can you embrace this multi-device world and ensure that your website can succeed in it? It’s time to go responsive.

What is responsive web design?

Responsive web design is an approach that has gained much favor and momentum in the web industry in the past few years – in part because it offers a solution to many of the limitations that mobile-only websites face.

A responsive website is one that intelligently rearranges its layout based on the size of the user’s screen. For instance, let’s say your site normally presents its content in three columns. The smaller a screen gets in size, the more problematic this layout can become, as the columns become so narrow that their content is unreadable and their buttons are un-pressable.

With responsive design, when a visitor is using a tablet in portrait mode or a laptop with a very small screen, those three columns reflow into a two-column layout that is better suited to the dimensions of those screens. For handheld phones, the design shifts to a single column of content with text and links that are large enough to be easily read and touched even on a very small screen. In this way, you have one website that “responds” to the multi-device user, adjusting its layout based on the particular device they are using – hence the name responsive design.

The benefits of responsive design

Efficient maintenance

It’s hard enough to keep one website updated with timely, relevant content; updating content across multiple websites is even more challenging.

When you go the mobile-only route, you end up with multiple websites to maintain. With a responsive approach, however, you have only a single website to manage. This makes it easier to keep your content consistent, because anytime you make a change to your website, that change is seen by all visitors regardless of the device they are using.

Zero gaps

As we saw earlier, supporting the multi-device user means being able to accommodate more than just large desktop screens and small handheld devices.

A responsive web design approach does indeed address these two extremes, but it also fills all the gaps in between, adapting its layout to perform seamlessly on the widest range of screen sizes and devices possible. This is especially helpful for those users that jump from device to device, as described earlier, because the site will adjust to their needs and present them with a consistently good experience regardless of their choice of device.

Adaptability

Because a responsive website design will reflow based on the screen being used to access it, your website will be equipped to support not only those devices that are popular today, but also those that we don’t even know about yet.

As new devices are released – some of which will undoubtedly also introduce new screen sizes or resolutions to the market – you can rest assured that your responsive site will do its best to present an optimal experience by “responding” to whatever type of screen it might be presented with.

Go big

While much attention is paid to how your website will handle smaller screens such as those on smartphones, there is another end of the spectrum to consider: large devices.

A responsive website can not only reflow its layout to present an optimal experience for small screens, but it can also do the same for very large screens. Large screens are often neglected in website design because even sites that are engineered for desktop monitors are not built to suit many of today’s widescreen displays. However, a responsive approach can allow your site to stretch its legs a bit in order to better fit bigger screens, making use of the additional space to better communicate your organization’s message.

Cost effectiveness

Since responsive design means you need only a single website, deploying this approach can often be much more cost effective than developing separate websites for different devices. This cost effectiveness is compounded further over time as you save the added expense of having to update, maintain and host separate sites for desktops, mobile phones, tablets, etc.

The challenges of responsive design

While there are a number of advantages to responsive design, there are a few challenges as well.

First, responsive design is not a feature that you can simply tack on to your existing website. To be done right, a responsive approach requires you to redesign and redevelop your site from the ground up so that responsive logic can be built into every aspect.

Another challenge of responsive design is that, if not done properly, it can result in loss of performance for users on devices where bandwidth is a concern. Often the small-screen version of a responsive design does away with some of the elements that exist solely for aesthetic purposes (large background images, for example). When such elements are “turned off” for smaller devices, if not configured properly, they might still be sent to the device anyway, meaning those devices are required to download excessive and completely unnecessary data that negatively impacts performance. To avoid this pitfall, make sure you’re working with a team that’s experienced in responsive design and has the technical expertise necessary to ensure that your site tailors both its layout and performance to deliver an optimal experience for any device.

Embracing the multi-device world

Traffic to websites from devices other than desktop computers has risen dramatically in the past few years, and industry analysts predict that number will continue to soar in the coming years. Looking at the hundreds of websites that I help maintain and manage, I am seeing an average of about 30 to 35 percent of all traffic coming from mobile devices of one kind or another and even a few sites where mobile traffic is nearing 50 percent.

As we head toward a future where more than half of our website traffic will come from visitors not using a traditional desktop computer, now is the time to ensure that your website is armed to compete effectively in a multi-device world.

---