Understanding User Needs

This is a very spontaneous blog post! I know I haven’t written much lately, so I will pop an explanation at the end. But before we get to that…

My partner and I have a tendency to watch fluffy shows while we eat dinner. We love international food shows, trashy dating shows, and firm favourite staples like Queer Eye and Drag Race. Last night we decided to try a new Netflix offering: Get Organized with The Home Edit.

I’d heard of this show from my friend, Bec, who was flabbergasted by some of the aspects of the show, and I couldn’t help but agree.

A shocking realisation

The first episode I was completely taken aback by a particular exchange. The 2 women who make up the Home Edit were discussing their plans to makeover the closet of a busy doctor working in a hospital. They were discussing all of these aesthetic choices they were going to make… adding a vanity, organising clothes by colour, etc. The doctor’s colleague (also a doctor) mentioned having an area where hospital gear (scrubs and stethoscopes) could be stored.

The two hosts were shocked.

They literally said “we never would have thought of this!”

I was equally shocked… about the fact that these hosts, who are apparently organisational experts, hadn’t thought of something as simple as you should store the important items that the user needs daily in an easily accessible place.

Form over function

This is a classic example of designers who “design” based on aesthetics rather than the needs of their user, and the perfect introduction to thinking about what the users of your website need.

Do your users need pretty colours and fonts? Probably not. Do they need good user experience? Absolutely.

When users come to your website, they are there to accomplish a task, and your job is to make that task as easy to complete as possible. These are the things you should be thinking about before you add flourishes and personal touches.

As mentioned earlier, the Home Edit’s favourite method of organising is doing so by colour. Look, I get it: a rainbow bookshelf looks pretty cool. But is it practical when you need to find a particular book? For some people, yes. There are people who are incredibly visual. But the average person isn’t going to remember the spine colour of every book they own.

The Home Edit take this one step further, and even organise the kitchen this way. Good luck remembering what colour brand of beans you bought this week. Did you pick up Heinz, Tesco’s own brand, or Asda Smartprice?

What do your users need?

With my own website, I went back and forth on whether or not to include pricing on the Work with Me page. This is a hotly debated topic in many service-based industries and, for a long time, I resisted putting any mention of pricing on the page.

Some recommend not displaying prices as it can prevent certain potential clients from approaching you due to budget, rather than suitability. Some say it gives your competition an easy way to undercut your prices.

I used to worry about these things, but then I started to think more about what my user wants and needs from me. And I knew from my own experience that one of the most important things to me when making a purchase is (duh) the price. So I added a ballpark price range to give my potential customers a better idea of the investment they’d be making when we worked together.

Before you start designing based on what you want, try making a list of what your users need.

Another little update

I know the posts around here have been a bit lacking as of late. I have quite a lot going on at the moment. I started a new full-time role about a month ago, and I’m moving to a new flat next week. I’m really looking forward to moving as I will finally have my own office space. I’m hoping that this will motivate myself to work more on this blog!

Thank you for reading!

Please share this post on social media, if you found it useful.
You can also buy me a coffee to help fuel further writing!

If you have a question, comment, or something to add:

Tweet Me!

Forcing Links to Open in New Tabs

There’s one thing I’ve heard over and over again in my life as a web designer. One thing that makes me cringe inwardly no matter how many times I hear it. One battle that I’ve had over and over year after year. One thing which makes the perfect beginning for my Access & UX series.

“Can you make that link open in a new tab?”

No. No, I cannot.

Well, okay, I could.

The ability to add target=”_blank” to a link to force it to open in a new window or tab is probably as old as HTML itself. But, like the <marquee> tag (which will cause your content to scroll across the screen – no, don’t leave this post and go use it) just because something does exist, doesn’t mean that it should. Or at the very least, it should be used sparingly, in legitimate use-cases.

If you don’t want to read this whole post, the take away is this: don’t use target=”_blank” as it is bad for accessibility.

Now, I’ve mentioned this to people in the past and have had people look at me as if I’ve sprouted 3 heads. People seem to think that this radical notion is something that I’ve invented to inconvenience them. But, in fact, it’s been stated time and time again, not least from the father of web usability Jakob Nielsen himself.

Beyond him are the thousands of other usability and accessibility experts who dedicate their lives to ensuring a set of standards are followed that allow the Internet to be used by the greatest number of people. Web developers (such as myself) follow these standards.

Why not open links in new tabs?

We could be here all day if we discussed the nuances of why we do or don’t do something in web dev. These accessibility guides are meant to be geared toward the average user so I’m going to make a simple list. If you are interested in elaboration, a quick Google can bring up the articles of the aforementioned experts who have made accessibility their life’s work.

  • It breaks the functionality of the browser by rendering the “back” button useless. The built-in functionality of the browser exists for a reason. Not everyone understands the nuances of using a computer but most people can understand that the back button will take them to the page they were previously on. Opening in new tabs can be confusing for users who are new or casual users of the Internet.
  • Screen readers may not be clear about links being opened in new tabs. For people with visibility tools, a screen reader is essential to browse the web, but not all screen readers are foolproof and not all people can afford the latest technology. Some screen readers may announce the link has been opened in a new tab (however, only after it has been opened). Some may not. Some may have their words blurred in with whatever else they’re reading (it is a computer, after all, not a human that picks up on these sorts of differences).
  • Switching between open windows and tabs can be a struggle. For people with mobility issues, moving a cursor around a screen to close an annoying or unexpected pop up isn’t easy. By forcing a link to open in a new tab, you are forcing the user to eventually need to close the tab, which could be causing physical strain or discomfort to those who cannot easily grip or use a mouse or trackpad.

When can I open a link in a new tab?Of course, with every rule, there is an exception. In this case, open in a new tab if:

  • the link is a document such as a PDF (most browsers do this by default with their in-browser PDF viewers, so still, just leave the link alone).
  • the link is to a printable version of the site.
  • the link is for documentation to be used alongside the site (such as Terms of Service when filling out a form).
  • the user is doing something on the page (such as watching a video or listening to audio) which they have explicitly asked for (i.e. they clicked the play button) and clicking a link would remove them from the site and kill the video/audio.

Of course, in these situations, you want to be sure the link is properly labeled so users know it will open in a new tab.

The common arguments for wanting to open a link in a new tab

I’ve heard it all when people are presented with this bit of usability and accessibility information. And most often their reasons for opening a new tab are:

“I prefer when things open in a new tab”

Of course, everyone has a personal preference. But that’s why browsers give you a choice. Opening a link in a new tab is as simple as holding Command/Control down as you click a link. This keeps you in control of your browsing experience at all times. You will know when something is going to pop up in a new tab because you’ve demanded it. In the web, everything that happens to a user should be the result of an implicit action.

If you prefer links to open in a new tab, you can do it yourself.

However, if I prefer links to open in the same tab and you’ve coded the link to open in a new tab, I have absolutely no say in the matter. There’s no shortcut to allow me to ensure the link opens in the same tab.

Never hijack someone’s Internet experience.

“What if people leave my site and don’t come back?”

Back to point one of the first section of this post: people know how the back button work. Even the most casual of users can use a back button. Users who are more familiar with browsers will know to use a shortcut to open the link in a new tab should they wish to keep them separate to return to later.

But, really, what you should be striving for isn’t tricking your user into staying on your website. You should want the user to stay and return on their own accord. And to do this, you need to have compelling content and you need to provide value for your user. No amount of link trickery is going to trap someone in your site forever.

Again, never hijack someone’s Internet experience.

Other resources

Don’t believe me? You wouldn’t be the first. However, accessibility is part of my job, and more than that, it is an area that I am especially interested in. Still, here are some other great resources on why you should not open a link in a new tab:

  1. Links Should Open In The Same Window by Michael Shofield, Library User Experience Co.
  2. When to use target=”_blank” by Chris Coyier, CSS Tricks
  3. Beware of opening links in a new window by Neil Turner, Webcredible

Disclaimer: All examples of disability in this post are acquired via research and are a generalisation of the sort of obstacles web users face. I am not personally affected and therefore may have overlooked nuances of certain disabilities. Web accessibility is something I am passionate about and am constantly learning about, so if you wish to share your personal experience, I’d love to chat in via email or on Twitter

Thank you for reading!

Please share this post on social media, if you found it useful.
You can also buy me a coffee to help fuel further writing!

If you have a question, comment, or something to add:

Tweet Me!

An Intro to Accessibility and User Experience

It’s so easy to make your own website these days, but if you don’t have a background in coding, you might not be aware of the impact that accessibility and user experience have on your blog or business.

There is a lot of information out there, so where to start? Right here! I’m going to share some of my top tips for improving your website’s accessibility– and therefore the general user experience– through a series of guides which should be informative and easy-to-follow for web creators who don’t really code!

Web Accessibility vs. User Experience

Web accessibility is ensuring that anything you put onto the Internet is available and easily used by anyone who may encounter it. You’ve likely seen features from Twitter and Instagram which allow you to enter image descriptions for the visually impaired. Helping users with different sight abilities is one of the most common forms of accessibility online, but it doesn’t stop there. Think about other areas, like mobility, where your user may have difficultly moving a mouse, for example.

User experience is the practice of designing in a way that will be comfortable and helpful for the majority of users. For me, I think of accessibility as the foundation of user experience. If your website is accessible, you’re half way there!

The key to good user experience is reducing how much your user needs to think. You want to design things in a way that allows your user to make very quick decisions, allowing them to access the information that they need quickly. Good user experience is a win-win situation: your user is able to achieve what they want with very little friction, and in most cases what they want is what you want. For example: quickly converting a casual visitor into a longtime audience member or customer.

Improvements in Built-In Accessibility

I asked in a group that I am part of if anyone had any specific questions about accessibility and user experience, and someone asked me if technological advances have usurped the need for specific accessibility tools, such as screen readers.

The short answer is yes, but we still need to do our part to ensure that those tools can be used effectively. Most devices have built in voice tools for the visually impaired. And browsers have accessibility tools such as more intuitive text size changing. But most software still can’t accurately guess the contents– and, more importantly, the context– of an image. So it’s just as important as ever that we use descriptive text so the build-in accessibility tools can relay that information to as many users as possible.

To get a better idea of how visually impaired people use technology to browse online (and navigate in general), I highly recommend checking out Molly Burke’s YouTube channel, specifically this video on how she uses technology.

Where to Begin with Your Website?

I know it can be daunting to look at your own website from an accessibility perspective if you’ve never done it before. So I’ve put together a list of a few things you can check for right now:

Is there enough contrast between the colour of your background and the colour of your text?

Typography is one of the most important aspects of accessibility for everyone. Even fully sighted people will not be able to read badly contrasted text. For example: if you’re using a light grey font, or using white text on a fairly light background.

There are quite a few tools for checking contrast online. If your website already exists, try popping in the HEX values of your background colour and your text colour into the WebAIM Contrast Checker. If you’re designing something new and you’re dead set on a light pink background you can use Color Safe to find text colours that will work with your background colour.

Do your links and buttons have hover states?

When a user puts their mouse over a link or button on your website (on the desktop version, of course) what happens? Does the colour or text style change? It should! This confirms to the user that they have found a link and reduces the time it takes for them to decide if they want to click it.

If you’re trying to get your user to click something important– like the link to your services page or the submit button on your contact form– you want to make that decision happen as quickly as possible. It could be the difference between converting a customer or having a confused or bored visitor leave your website, never to return.

Are your similar elements consistent?

Another key to accessibility and user experience is consistency, consistency, consistency. Wherever possible, elements that provide the same function should look as similar as possible. This can mean:

  • Keeping the navigation consistent on each page of your website.
  • Using the same heading styles for blog posts and static pages.
  • Sticking to a maximum of three different fonts on a page.

Just doing the above is likely to get you on track with improving the accessibility and user experience of your website, which will benefit each and every user of your website in the long run!

I will be continuing to post about accessibility and user experience so be sure to check out the other posts in the category to learn more about it! And let me know if you have any specific questions!

Thank you for reading!

Please share this post on social media, if you found it useful.
You can also buy me a coffee to help fuel further writing!

If you have a question, comment, or something to add:

Tweet Me!