It’s 6.25 on a Saturday morning. The train starts to move, and I’m practically alone in the carriage, with just one other person at the other end.

I connect to the train’s WiFi, and settle in for a four-hour journey. 45 minutes on one train, three hours on the next, and then one small leg on the Tube to round it all out.

I have my phone in split-screen view so I can write out this blog article, while loosely keeping an eye on an idle game which is probably getting more attention from me than it deserves.

As I type, the game size shrinks down to being barely visible. Yet, despite it taking up less than a fifth of my screen, the most important information is still clearly visible. 

The timer bar is small, but the difference between green and red is clear as day – the numbers inside telling me the exact time aren’t, but that doesn’t matter as they just give the same information as the bar itself.

And this, really, is the only thing I need to be able to see. All I need to know is when to click again, which is when the timer hits zero.

Was this a conscious choice by the game’s developer to always keep the timer in the top-left of the screen, no matter the size? Did they know it would scale down so well it could probably work on a smartwatch? I don’t know. Maybe it’s just a happy accident.

But that one small design choice – to not just show the text, but also have two very distinct colours that stand out amongst everything else – is a perfect example of good user interface (UI) design.

What is UI?

The UI of any piece of software, such as your company’s website, is one of its most important aspects.

Not only is it how the software looks and feels, but it’s also how users interact visually with it. I could rant and rave for hours about hiding content behind 50 different button presses or requiring user input where none should be required. But before any of that can be discussed, it’s what your website looks like that people will interact with first.

And in this day and age, you have absolutely no idea what device they will be looking at your website on.

If we go back to when I first started developing websites, you knew that as long as you kept your website’s main content at 700px wide, everyone’s monitor would be able to show the website as you intended.

But nowadays? You have large monitors, small monitors, phones, TVs, fridges, watches, and more. All of which someone could be using to view your website.

How does your website look on those? Aside from somehow testing on every possible device on the planet (yes, even the Nintendo 3DS browser), your next best bet is to ensure you have design principles for your key content that you know will work on any screen size.

Data or WiFi?

Back to my journey for a moment. I get off the first train, and I’m waiting at the station for the next one to arrive. Unfortunately, this station has no WiFi, so my idle game disconnects. Luckily, Google Docs doesn’t need me to be connected to the internet to continue typing.

I could enable mobile data and eat into my data allowance. But I’m going to need that later to navigate around London, as I have no idea where I’m going once I get there. 

Again, you’re probably wondering why this matters for your website. 

Large image sizes, dynamically loaded content, server requests for data. All of these things will be a concern to users who have spotty internet connectivity or are accessing your site via their mobile data.

Not everyone will have unlimited data usage on their phone, so those 5MB images of your team members which you plastered across your site are very quickly eating into their data limit. And if they were already close to the limit, they may not be able to access the content they are actually looking for on your website. 

That isn’t your only concern, though. Slow internet. The bane of everyone’s existence. Whether it’s mobile data or WiFi, you can’t be sure how fast your users’ internet speeds will be. 

This means the content you’re loading in after the initial page load could be stuck in limbo for a while before it actually displays on the user’s device. Or worse, if you are putting important information into an image – such as an infographic – and the filesize is larger than it needs to be, then users may be waiting “too long” (more than a few seconds) for the image to load, or may not even realise there’s a missing image and navigate away before seeing the information you want them to see.

My next train arrives, and I connect to its WiFi. Oh no! My silly game won’t connect via the onboard WiFi. What am I to do for the next three hours!? 

Now that I’ve had my internal cry, I guess I should talk about the final issue I want to discuss. Layout.

Does your layout work for your users?

It sounds simple, but a logical layout which works well across all devices can sometimes force you to reconsider how you display your content.

For example, a table with 10 columns looks fine on your laptop, but on your phone the text will either be so squished together that you can’t read anything, or you will need to add a horizontal scrollbar to it so people can view it all. Neither of which is ideal, but changing the tables into a different layout entirely can make for an easier read on smaller devices.

And sometimes it can be as simple as how columns stack. If you have used visual site-builders before, such as the Divi extension for WordPress or SquareSpace, you will know that when you build a site, you build sections in columns. Then when you’re on a smaller device, the columns stack on top of one another. 

This usually works perfectly fine, but sometimes you have a design that works nicely in a column layout, but when it stacks it doesn’t flow well. For example, you may have four columns which contain text, image, image, and text. This looks nice on a wider screen where they are displayed side by side. But once they stack, having to scroll through two images in the middle of the text doesn’t read as nicely and seems like wasted space.

At the end of the day, you can hope and pray everything will look and load as you expect. But without testing, it’s impossible to know exactly what your users will see and what issues they may face.

If the prospect of getting it right sounds daunting, or if you know there are issues with your current website, get in touch with our team of experts today. Email hi@theyardstickagency.co.uk or call 0115 8965 300.