Beyond Design: Website Accessibility, Integrations & User Experience

Posted on July 15, 2019

Today, website standards are more critical than ever before. Unfortunately, many business owners have a limited understanding of what a website should be, and more importantly, they lack the knowledge of what a functional, optimized website can deliver. Many underestimate the value of going beyond a website that looks good. In order for a website to succeed in today’s digital-focused world, we must go beyond design.

So… it’s time. You need a new website – yours is outdated, maybe not mobile responsive – and you’re trying to decide on where to start or who to work with on it. Maybe you don’t know exactly what you want, but all you know is that you want it to look awesome, right? You want someone to go to your website and say WOW this is cool! I want their services or to buy their products! That first impression, that initial feeling, captures your attention – modern look and feel, through colors and big beautiful images… the DESIGN! But we’re not going to talk about any of that today.

That’s because we want to take you beyond the design. Show you all of the work that goes on behind the scenes in creating that great looking design, and what other factors need to be considered to make sure that the site not only looks great, but performs well, and gets you the results you’re looking for.  Pretty much anyone can grab a free theme and use one of the many tools out there to build a website in the matter of a few hours – Weebly, WIX, all kinds of DIY tools.  But the truth is that building a website that is going to perform and meet your business goals starts way before the design and includes many more factors, decisions, and planning then most people would realize.

Website Usability

For a lot of companies, their website is their only point of contact with their customers, so they have to rely heavily on their web presence to get those leads that they are looking for from their users.

Usability means user-centered design. Both the design and development processes are focused on the prospective user — to make sure their goals and requirements are satisfied.  There are varying views on how Usability is classified, but here at Top Floor we narrow them down into 5 key principles: Availability, Consistency, Intuitive, Hierarchy and Credibility

Availability– which simply put means – is the website available?

• Does the site load properly? Or even at all? Hopefully within a couple of seconds
• Are there 404 pages or broken links and images? Does your user require Adobe Flash to view your site? Let’s hope not!
• And is the site mobile responsive – offering all of the same information the user would get on the desktop version of the site?
• When viewing the site from browser to browser is it consistent? No matter if you are on Chrome, Firefox, or Safari?

Consistency – but not only within the browsers or the devices but also within the design from page to page

• We want to create a consistent experience for your users – so utilizing colors and design elements in the same way
• Use the same blue/grey color for all places that use a hover state overlay.
• Chose an actionable color – in this case, it’s red, and stick with it throughout the site for all buttons – rather than it being sometimes blue, sometimes green on certain pages, and at other times yellow…
• The color palette should remain consistent throughout every page and always align with your brand’s colors and your company’s image.

Is it Intuitive? There are certain design elements and functionalities we’ve all grown accustomed to – things we just know – without having to think too hard about what something is supposed to do when I hover over it or click on it. Which leads us into the intuitive design.

• Do you know when you see those 3 short lines stacked on top of one another on a mobile device? We all know, that’s how you open the menu.
• You know that when you see an arrow pointing down, that when clicked, it will drop down to give you options to choose from.
• In this example, the row of dots indicates that it is a carousel, and by the first dot being red, you know you are on slide 1 out of 6 total.

As a general rule, it’s best to stick to what people know and expect out of a web experience – so you don’t intimidate your users or distract them from doing what you want them to do.

Hierarchy – And speaking of getting your users to do what you want them to – creating visual hierarchy will help lead them right to it!

• You want to make sure your users focus on what is important to you, and to them.
• Without a visual path to those conversion points, your users will navigate in the wrong direction.
• There should be a clear order of importance
• This can be achieved through a number of variables, such as:
• The sizing of elements
• Using dominant colors in certain areas to create contrast
• Preserving negative white space to allow the eye to rest

It only takes 2.6 seconds to stimulate the first impression on a website, so make it count

Credibility – last but not least, you need to build trust. Don’t make your user skeptical about what you’re selling or offering. There are some easy ways to create credibility. For example:

• Have an About Us page to show you have a legit history
• Show an address in your footer, so that it feels like it’s a real place
• Showing links to your social media pages (but only if you’re actually active on them) otherwise, it could actually discredit you.
• If you’ve won awards or have a great Better Business Bureau score – show it!
• And if you have real case studies or testimonials – flaunt it

SEO Framework

SEO is vital to any digital marketing program, and one of the building blocks for any successful website design/build.  All of the items we are discussing today are important elements to a successful website project, but SEO is arguably at the top of the list.  In my 7 years with Top Floor, I’ve only had 1 of about 200 projects where organic traffic was not of importance to the success of the project/company.

Content Hierarchy

Structuring your website is crucial for both its usability and findability. Many sites lack a sound structure to guide visitors to the information they’re looking for. Having a clear site structure also leads to a better understanding of your site by Google, so it’s incredibly important for your SEO. It helps Google ‘understand’ your site

The way you structure your site will give Google vital clues about where to find the most valuable content on your site. It helps search engines understand what your site mainly is about or what you’re selling. A decent site structure also enables search engines to find and index content quickly. A good structure should, therefore, lead to a higher ranking in Google.

Take for instance your homepage:

Your homepage should act as a navigation hub for your visitors. This means, amongst others, that you should link to the most important pages from your homepage. By creating this hierarchy, you are doing a few things:

1. Your visitors are more likely to end up on the pages you want them to end up on;
2. You show Google that these pages are important.

A good practice is to start by laying out how your site will lay out into a single column format (mobile first):

1. Title and positioning statement
2. Brief introduction copy
3. Explainer video
4. Call-to-action buttons
5. Client logos
6. Content/images that show value/features
7. Stats
8. Latest news/blog

From here you can begin to think about how you would expand and build out this content for a widescreen environment, adding design elements and expanding as space allows.

Keyword Mapping

Every development company out there will tell you that keyword research is a part of their process, but the truth is no one spends enough time on it.  Because it does, in fact, take time and expertise to develop a keyword strategy for your business.

• Competitor research
• Keyword planner tools
• Search volume tools
• Be diligent and organized in mapping keyword targets
• Nothing should be set in stone.  Revisit every few months
• Track performance
• Adjust

Content Strategy

Match your writing to your audience

• Why – Know the business case and objectives. Why are you embarking on this project?
• What – What is the message?
• Who – Who is the audience?
• Where – Where will the message be read (location, device, context)?
• How – How should we present/structure the content?
• When – Timing of the process to create and publish the content.

Website Accessibility

Now more than ever, web developers and web designers have been putting a much larger effort into making the web accessible to everyone – by implementing accessibility best practices into the actual code of the site, and through the visual elements used within the design.

-A universal guideline that developers use is what’s called a “Web Content Accessibility Guideline” or a “Wick-Ag” for short.

-But it’s broken out into different levels of compliance A, AA, AAA

-We won’t be going too deep into it today – merely just skimming the surface.

-But if you would like more information, you can visit www.w3.org/WAI/ which stands for “Web Accessibility Initiative”.

There is no single type of disabled user – different types of disabilities can include:

• Auditory
• Cognitive
• Neurological
• Physical
• Speech
• And visual

So the 4 main principles that must be in place to meet the “Wick-Ag” standards are; Robust, Perceivable, Operable and Understandable.

When thinking about all of the accessibility issues that there are on the web, we came up with a pretty extensive list. So we had to pair it down to the top 5 we see most often in our line of work. And one of the biggest ones is alt-text.

Alt Text

Alt text is used within the HTML code to describe an image that’s on a page to someone who is visually impaired and has to use a device called a screen reader. It’s something that gets overlooked often because it’s easy to miss, but it’s important – especially if the image is important to the context of the page.

How do you write alt-text?

The best way to describe it is to close your eyes and have someone read the alt text to you. Then if the image you imagine is a pretty accurate version of the image being described, then you’re on the right track.

Some things to note:

-Most screen readers cut off at 125 characters – so keep it relatively short

-You don’t need to say things like “Picture of…” or “Image of…” because that’s already assumed

Color Contrast

Something that is probably rarely thought about when creating a company’s brand colors, is if those colors will work well together when it comes to contrast.

Users with low vision have to rely on contrasting colors in order discern, for example, a button or a link from a background. So when designing a website, it’s important to consider the way that colors lay on top of one another.

There are 2 kinds of contrast issues that come up:

• Between text and background colors
• And between text and components – like buttons or text over images.

There are a couple of tools and tricks you can do to check your color contrast:

• A good way to test the contrast of design, it to turn it into black and white.
• There is an easy tool to use, to test out your colors, called “Contrast Checker” on webaim.org – but there are several other tools, and extensions and apps you can use out there as well.

Forms

In almost all circumstances having a user fill out some sort of form on your site is essential in making a purchase or starting a conversation with a company to get a quote or ask a question and so forth. But there are a lot of accessibility issues that arise within forms.

A lot of the fixes are actually really simple to make within the code so that screen readers can distinguish the type of field or selection that’s needed. Things like:

• Fields missing labels
• Buttons missing values
• The ability to hit the tab key to move to the next field
• And just making sure it is clear to the user what they did wrong when filling out a form – by highlighting the field and including a written warning.

Links & Buttons

Having buttons and links on a site is essential in allowing the user to navigate from one page to another, and sometimes it’s such little things that can make a big impact.

• It could be as simple as making sure a button looks like a button. When is contained within a basic shape like a rectangle, you know it’s a button because that’s what we’ve been conditioned to recognize it as.
• But say you have a text button, that isn’t contained in a shape – adding an icon like an arrow helps to confirm to the user that it is indeed meant to take them somewhere.
• Think if you were color blind – how would you know it’s a link if you were to rely on color alone?
• And through color consistency – as we talked about earlier – anytime a user sees a red button, in this case, they know right away that it is an actionable item.
• To go along with this are in-text links – like within a paragraph of text. Again, you can’t rely on a color change alone to know it’s a clickable item. That’s why it’s important to add an underline – one of the most archaic ways to show someone that it’s a link.

Clear Navigation

One of the worst things that could happen when a user comes to your site is for them to leave because they can’t find what they came the site for – which is referred to as a “bounce rate”. So to make sure the user can find what they need, it’s important to have multiple ways of navigating the site.

So a few different ideas enhance the navigation of a site, are to include:

• Breadcrumbs – which are especially helpful when there are several layers of pages before getting to the page you need.
• We also like to use what’s called sticky navigation – which is when the main navigation across the top, follows you down the page so that it’s accessible at all times no matter how far down on the page you are.
• If there are several levels of pages under a single section, it’s helpful to have dropdowns within the main navigation.
• And lastly, towards the bottom of a page, prompting the user to check out other related pages – in order to keep them on the site longer.

Accessibility is a pretty heavy subject – there’s a lot to know, and it can get really technical but there are some free tools you can use to help get the ball rolling, to identify the complexity of issues within a site.

-One of those tools is called “Wave” and can be found at https://wave.webaim.org/

Personas and Audiences

If you don’t understand who your users are, how can you tailor your content to their specific needs? Being able to understand your audience is the best way to make sure your site is a success. But once you discover who your audience is, how do you actually go about actually catering to them?

Personas and audiences can be broken down into several different topics:

Demographics: age, education level, job titles, etc.

Creating Personas: A Web Persona, by definition, is “a summary of the characteristics, needs, motivations, and environment of a key type of website user”.

New or Existing Users: Even if you’ve done all of that, and you feel confident in your educated analysis that these are your customers, a common mistake would be to pigeonhole yourself, and not consider the fact that there are still going to be other users coming to your site that doesn’t fit into any of your preconceived personas.

Defining User Goals: In order to create a goal-oriented design, we have to find out what those goals are, and what success looks like.

User Journey: A user journey map (also known as a customer journey map) is a diagram that visually illustrates the user flow through your site, starting with initial contact or discovery, and continuing through the process of engagement into long-term loyalty and advocacy. It identifies key interactions and touchpoints with your website or mobile app and describes in detail the customer’s goals, motivations, and feelings at each step.  Customer journey mapping helps organizations visualize customer interactions over the course of their journey. With a completed journey map in hand, an organization can then orchestrate the ideal customer experience and optimize it for desired outcomes. But there’s no single way to create a great customer experience. This is one reason why mapping the customer journey is so important, prompting an honest assessment into how your buyer persona interacts with your website across multiple touchpoints.

A key part of analyzing this customer journey is gathering actual data and behavior (following all of the steps that we just discussed.

• Inspectlet
• Look at the sources of traffic – Mobile, Tablet, IE, etc. using Google Analytics
• Interview current clients/gather data on how they use the site

So how/where do you start:

Step 1: Choose Your Personas

Step 2: Map the Touchpoints

Step 3: Create a Narrative

Step 4: Create a Visualization from Your Narrative

Page Speed

Page speed is very important, you want to make sure when someone visits your website, they are not met with slow load time and there are some things you can do to help with this.

Compressed Design Elements

• WP Smush Plugin
• Design balanced with speed

Want to have a cool looking video on the homepage, that’s great, but it needs to be done the right way and you have to expect a slightly slower load time.  If done right and discussed between teams (dev, design) the impact on your users will be positive vs negative.

Development

Minimize your HTTP requests: Research shows that 80% of website loading time is related to downloading on-page elements. So for those of you who have lots of these components on your website, you have more HTTP requests.

You should also eliminate unnecessary redirects. While these are often needed for fixing broken links, they create additional HTTP requests. This will slow down your website speed.

Implement Browser Caching to Reduce the time to first byte (TTFB)

Minify and combine files

Each file on your website will increase the time it takes for a page to load. If your pages have lots of files, they will require additional HTTP requests, which we discussed earlier.

But you can’t just go through and eliminate everything. Then your website will be left with nothing. Instead, just minify and combine them. You can do this for HTML files, CSS files, JavaScript files, Google Fonts etc.

Minification removes unnecessary characters from your files, such as formatting and white space. Basically, it will get rid of anything that isn’t required for your code to function. This ultimately reduces your file sizes.

Hosting

Most people look at hosting as just another cost and they want to keep it as low as possible, but really you do get what you pay for. Server response time is the number 1 factor in website speed. It contributes to (but is different from) your webpage loading time. Your webpage load time depends on several factors, including its code, caching, content delivery system and more. The response time of your web hosting depends on the quality of its network and hardware. Ultimately, server response time is the foundation of your website’s speed. According to Google, a server response speed of 200 ms is your goal.

Most of the time, people choose their web hosts for convenience. Or because it’s cheap. They settle for the first service they stumble upon without much thought to its performance.  The fact is that it is pretty easy to switch hosts.

Don’t skimp. What can you do:

-Switch hosts

-Choose dedicated hosting

-Use a content delivery network

A content delivery network (CDN) uses servers dotted all around the world. Your website information will be stored on each of them, so it will serve users based on their geographical location. That means if someone visits your website from Australia, your CDN will serve them content from the closest possible server. With a content delivery system, it doesn’t matter where in the world your site is accessed from, it will always be fast. The two big names in content delivery systems are MaxCDN and Cloudflare (our partner for hosting uses Cloudflare.)

CMS – The Good and the Bad

Templated vs. Custom

Con: It’s not unique

Con: You’re Basically Stuck with What You’ve Got – customizing can be costly and time-consuming

Con: User Functionality can be very Limited

Con: Not as easy to use from an admin side

Con:  Design is limited to what they can do

Con:  The extra and most times unused functionality of the theme can cause issues

Pro: It’s Fast and Easy

Pro: It Doesn’t Cost as Much

Open Source vs. Proprietary

As the name implies, a proprietary CMS is a software that is the legal property of an organization, group, or individual that created it.

Examples of proprietary content management systems or digital experience platforms are Adobe Experience Manager, Kentico, and Sitecore.

Developers who create an open-source CMS publish the code and allow others to use and modify it.  Drupal and Wordpress are examples of open source content management systems.

The main planning process here when thinking about what CMS to use for your project is what do I get out of the box, will I be able to customize where needed, how much work does my particular development team need to do vs what is already available (modules, plugins, etc.) and then obviously the upfront and ongoing licensing costs.

Ease of Use

Using page builder type elements where code is put onto the backend editor experience vs creating the ability for non-developers to add sections/pages/any content necessary to a site.

Security

How secure is the platform you are using? Is there a team that is dedicated to this? There are always new updates coming out with Wordpress so it’s extremely important to be cautious and know what those options are for your site.

Community Support

It’s great to have the overall support of the community with maintaining modules, and everything that goes along with a website.

In the end, when you going through the process of redesigning your own site, spend the time to do the legwork.  It’s more than just designing something that looks cool and matches your brand style guide. If you want the project to be a success, you have to go beyond the design and start with at least some aspect of all the items we discussed today,

If you have any questions, please feel free to reach out to us! Additionally, we do offer a Free Digital Marketing audit that can help you get a great baseline on how your website is standing up to the competition.