Web Accessible Designs | Part II

So,  in my last post, I had laid out two suggestions – no, three, since the colour contrast one was a bonus tip – for designing web accessible designs. Here I’m going to continue (and conclude) the chapter by chalking out three more ideas on the topic.

Quickly summarizing, I had previously discussed how we can make good use of typography, colour contrast and images to provide better user experience for people with visibility issues, cognitive difficulties, colourblindness and educational barrier.

Unlike the last article, I’m not doing a proper recap here because this would otherwise be a loo…ong recap.

So, let’s resume the discussion from topic number 3.

3. Whitespace and the Size of Elements Used

The importance of whitespace has always been emphasized by UI gurus.

Whitespace or negative space refers to the empty space between and around elements of a design or page layout. It is the space between paragraphs, images, icons, buttons and any other items on a page.

Why is whitespace so important?

The function of whitespace is to remove clutter and make the elements stand out. This aids in better visibility and comprehension.

So, who does it help?

Everyone. But it especially helps people with visibility issues, people with cognitive disorders and people with problems of the nerve who find it difficult to keep their fingers steady.

I know an individual who has been facing problems of the nerve for so many years now that he has become almost habituated with it. He’s a tough guy by heart, and insists on doing all tasks by himself. It’s pathetic enough to see him spill two-thirds of soup from his spoon every time the spoon tries to cover the distance between the bowl and his mouth. I guess I need not discuss the scenario when an application with a crowded interface finds its way into his hands.

Making proper use of whitespace will also help mobile-users, like many of my own acquaintances, who have chubby fingers and always complain about accidentally tapping on elements they never intended to! ?

Let me cite a very simple example from an article on Medium:

Without doubt, the piece on the right hand side is much more relaxing for the eyes and hence the brain. Now, this might also help people like me who feel nauseous while viewing digital content during commute.

4. Navigation

Let me hear what you have to say regarding the menus on these two screens:

Which one of these has a better menu? Your vote please! ??

When I asked this question to the audience at WordCamp, there was an almost unanimous shout, “Cactus!!” Once the roar quieted down, I heard another weaker shout, “Clark Creative!”

To be honest, the designer in me who is passionate about making things look pretty, loves the little red hamburger menu on CACTUS. It’s neat (and cute), gives the screen a lot of room to play around with things, and has a mystical aura about it as it makes one wonder what treasures are going to be revealed once (s)he clicks on it.

But the grown-up designer in me – the one who prefers making things more usable over making them simply pretty – promptly chooses the menu on Clark Creative.

Allow this “grown-up” designer to explain why.

A hidden or complex navigation may be fascinating for those who love minimal designs or have enough time to leisurely browse through the website but for many people it is a gateway to exit your site. With intuitive UI design on the rise, most people tend to forget that not everyone is as deft at understanding UI as the designer.

Let’s consider the famous hamburger menu.

Hamburger Menu

We love the hamburger menu, don’t we? They look cool, have been quite popular and, most importantly, they help us design “good looking” designs.

But are all “good looking” designs really good?

Like everything else, the hamburger menu comes with it’s own sets of pros and cons. We love the pros and choose to forget the cons.

Pros:

• Makes the interface clean
• Well-known, hence easy to use
• Accommodates long navigation neatly

Cons:

• Hides important features
• Confusing for new users
• Difficult to access using one hand

For people with less digital experience (older people, for example) or for people with difficulties in gestures or in vision, it might be a big problem.

We all know the “rule of thumb” for designing mobile interfaces, right?

While browsing on a mobile device, the finger that is used most frequently is the thumb. So, the most important elements are placed where the thumb can comfortably reach. But the hamburger menu is always out of reach ?

Not sure about an alternative to this delicious menu on mobile UI since the space is very limited. But it would be great to have one. Looking for your suggestions here!

But we can find an alternative to it on websites. If the navigation is quite large, the recommended hierarchy would be to list the main pages in an open navigation, and then contain the next set of page navigations in a closed menu. The remaining less important page navigations can be included in the footer. Our old friends dropdowns and mega menus can come really handy here.

Text Hierarchy

To provide the optimum experience to users, it’s best to maintain a hierarchy of the information presented.

Show the most important information on the top, so users won’t have to scroll unnecessarily.

For people who have difficulty focusing for long, or those with minor visual problems it would be painful to scroll past redundant text and images to reach the CTA or the form or the primary piece of information to be conveyed.

Of course, I’d want my site visitor to see all the effort I have put in, but not at the cost of their discomfort. This is also a good practice as otherwise many users might miss your USP.

5. Animations

And here we come to the final suggestion: animations or motion designs.

The popularity of motion design is on the rise. And why not? They look great and can convey information in an appealing and playful way. But did you know that they also have the capability of making people sick?

A distant relative of animation, GIF, can be very harmful if used inappropriately. GIFs that are too brightly coloured and flash pretty fast multiple times are known to cause seizures in people with photosensitive epilepsy.

It might be shocking to know that back in 1997 an episode of Pokemon sent 618 people, mostly children, in Japan into seizures. It featured flashing blue and red lights in one scene.

Now, WCAG forbids the use of anything that flashes more than 3 times in one second.

Let’s take a look at another kind of animation that looks great but might be disturbing to some viewers.

Here’s a Dribbble shot by popular designer Markus Magnusson:

While this may not cause seizures but looking at it for 4-5 seconds might cause dizziness in some. It does make me dizzy ?

Anyway, it’s best to avoid animations and GIFs that can cause harm to people. You never know who might be looking at your website!

So, here we conclude the journey.

All these are basically small changes that we can bring into a design so that all people, irrespective of abilities, disabilities, age, location or bandwidth, can access what we build and put up online. If the design intentionally or accidentally leaves out a whole group of prospective users, then it can’t be termed as a smart design.

Thinking of upgrading your brand’s interface to a smart one? We can help!