Design is not just how it looks

According to Paul Adams there are 4 aspects to design: outcome, system, interaction and visual.

Unfortunately, I think we often focus our attention on the visual side of things.

This can create all sorts of different usability issues.

Here I‘ll share some of the most common examples of this and why it’s problematic.

1. Making buttons and links look the same

There are quite a few reasons why we make buttons and links look the same.

But if we do, we’ll cause problems for some users.

For example, screen reader users would not see a link (which is a button styled like a link) in their list of links menu – even though they can see a link on screen.

If we know there are problems, then it’s our job to solve them.

2. Disabling focus styles

Sometimes the focus style is disabled because it’s ugly.

But good design means making users know where the focus is so they can orientate themselves accordingly.

Maybe even take this as an opportunity to design custom focus styles.

3. Having small touch targets on desktop on the basis that most people use a mouse

There are lots of large screen devices that are touch-enabled like the iPad Pro.

But even if that wasn’t true, large tap targets help all users including mouse users.

Especially those with fine motor impairments.

4. Hiding buttons on small screens on the basis that mobile users swipe

Firstly, not all small screens are mobile devices. You can have small desktop monitors or have two applications running side by side.

Secondly, not every small screen device supports gestures.

Thirdly, not all users are aware of gestures or know they’re available to use.

Giving users buttons makes things obvious for everyone no matter what.

5. Checking colour contrast on a Macbook pro

Low contrast text is unreadable.

Content must be legible for it to be usable and so it’s vital colour contrast meets certain accessibility criteria.

6. Removing labels to save space and keep things minimal

There are very few cases where it’s okay to forgo a visible label.

We know labels are important so we should make room for them from the outset.

7. Providing high resolution images on the basis that most users have a fast connection

A lot of people are interested in your service that don’t have high speed internet connections.

Even for people who do, sometimes they’ll be on slow, patchy connections.

Making services lightweight for all, makes the slow fast, and the fast super fast.

8. Assuming everyone has cutting edge JavaScript

While most people have JavaScript enabled, not all do.

And in reality, it’s more about visits than it is about users.

Things go wrong which means good design means designing for when things fail.

If we know that some people won’t have JavaScript we should design experiences for those with and without it.

9. Disabling zoom

Disabling zoom on mobile browsers stops users who have poor vision from being able to read content.

Even users with good vision may like to zoom in on certain details depending on the situation.

Disabling zoom takes control away from users whereas good design gives users control.

10. Reducing the amount of words so they fit the layout

Users don’t visit websites for the perfectly aligned grid.

They come for the content and the service your provide.

Cutting words at the cost of clarity hurts the user experience.

Instead, design with realistic content so that users can consume it in the best possible way.

11. Justifying something because someone else does it

So many popular organisations like Google and Apple give users slow and inaccessible experiences.

Pointing to them as reason to use a contentious problematic pattern is not reason at all.

Instead, we should crit design on merit and not on authority or popularity.

In conclusion

Design is so much more than how it looks.

Visual design is important and should compliment the experience, not hinder it.

Our job is to marry all aspects of design together in order to provide a good experience for everyone.

If you know of other similar examples like this, please let me know.