Exploring OLA Homepage
To discover design risks
From a first glance, the homepage looks pretty good and consistent.
When clicking on buttons, you get an orange border.
The buttons on the side menu only get borders on 3 edges when selected, and the border expands beyond the edge of the button.
Similarly in the top right, there’s an account button, with borders only around 3 edges. Closing the cookie banner at the top of the page makes it look like this button only has 2 edges of highlight.
Taking a look at the CSS, they seem to utilise ‘outline’ in order to create the border.
With the dev tools open, the width of the page decreases, and a burger menu appears in the top left to open up the side menu. Interestingly, this has a border as well, but all 4 edges fall within the outer edges of the button.
This actually utilises a different method of highlighting, setting ‘outline’ to none, and using box-shadow instead.
Changing the CSS to match the box-shadow method brings the border inside the buttons.
There are two alerts in the middle of the screen that seem like they utilise a similar border.
Inspecting these reveals that they actually use a 3rd method of bordering: the ‘border’ element.
There’s a button at the top of the side menu for starting a new application, inspecting this reveals that it also utilises the box shadow method. A lot of other elements seem to utilise box-shadow, and I think they likely utilise box shadow where an item will be clicked on, and they don’t want neighbouring elements to be moved based on the extra pixels of a regular border. Because box-shadows can be inset, it doesn’t impact anything around it.
Outline looks like it does a similar thing, but doesn’t move elements around it, but still adds it outside the element, instead of inside it.
It looks like some of the other menu elements could utilise box-shadow for greater consistency though.
There’s also a motability image on the header of the page that doesn’t actually do anything. I’ve clicked on it a number of times though thinking it would direct to the home page, but this doesn’t seem to be the case. There’s a home button within the side menu, but I feel like I still expect the company logo to redirect home as well, and that other sites do this.
One other thing I noticed is the cookie banner doesn’t have a fullstop at the end of it.
It isn’t designed to be use on phones, but the responsive design almost works, minus the header which goes off the screen. It would probably work if the Motability icon was removed and some font sizes adjust a little.
The site is meant to work with tablets though, and switching to iPad in the dev tools adjusts all the elements well. When in landscape though, there is a large gap to the right of most elements, with it not correctly utilising the space.
It seems that a number of the higher up wrapper elements (And some within) have a max-width of 600px, and that’s what prevents it from utilising the full space during landscape mode.
On the homepage again, when using iPad in vertical mode, one of the main wrapper elements has uneven margins on either side, with the left side have a 51px margin, and the right 36px. Oddly, it has differing top and bottom margins, with 25px top and 51px bottom. It almost looks like someone might have mistyped and meant to have 51px top and bottom, or left and right.
When back in full screen desktop mode, this doesn’t look as odd as it does with an iPad. They actually look even in fact, though the inspector insists they’re uneven still. I wonder if the uneven-ness is to account for the scroll bar at the side of the screen.
This could be resolved quite easily.
When in iPad mode, the tiles within the To-do list don’t spread evenly, and stick to the left border with exact spaces between each, leaving a large gap to the right. This perhaps only looks odd due to the alerts above them sitting centrally between the margins.