Time to challenge the internets visual conformity

I wrote a few weeks back about the fact that the internet doesn’t need to be quite as bland as it is. The prerequisites have changed which opens up a lot more choice in design. This idea seems to be becoming a trend, this morning I found another great article on the topic: “Why do all websites look the same?”.

How will you break the mould?

It's time for a radical rethink of web design paradigms

I love the current state of visual design online, don’t get me wrong. There’s so many beautiful apps and services that I’m constantly feeling the pressure to up my own game. Oddly though, in this sea of great design, there’s a strange aspect of conservative conformity. I’ve only started to wrestle with this myself, but this article will detail why I think web design needs a reboot.

There’s no reason for the web to look like the 90s

Most design today is based, at least in part, on context from the 90s. At that time design was constrained by bad browsers, small screens with poor contrast and bad system font typography. The results were frankly fantastic. Since then most of these constraints have changed radically, but design trends still closely resemble their forerunners.

Screen size and layout metaphor

Screen size should have little to no impact on design. In the early days of the internet, screens were terribly expensive and for the first couple of decades they were more or less standardised into a handful of sizes. TV and Cinema did the same thing, it was a great way to ensure affordable cost and mass market.

Today there are hundredsof screen sizes being used in large numbers. So many that simply testing a design on the most common screen sizes becomes an exercise in futility. Instead we tend to settle for flagship devices. An iMac Pro and Google Pixel Phone? Then we’re all set. Never mind the other 89 screen sizes that are used in more than a million visits per week...

Designers all over the world try to adapt to this by padding their layouts as if they were cinema screens. Just like Hollywood in the 60s we show the same things in almost the same size and then add white space fill the full width of the screen. Making sure the proper elements align above the "fold" (whatever that is on screens today).

This is nonsense. Screen size actually affects user behavior. The iPad technically isjust a large iPhone, but people sure don’t use it as such. Windows 10 does work on mobile devices, but no one would use software designed for a 4k monitor on their cellphone.

I believe that the only useful metaphor left over from the early days is scrolling. Scrolling is arguably more useful than ever because it is the main user inputon the most common type of device used online today — the touch screen phone.

Instead of seeing web pages as a full width scrolling sheets, there are two other metaphors in use that are more useful with todays technology:

Specifically sized cards.

Possibly made famous by the failed Palm OS. Look at any mobile app today and you will see cards everywhere. Usually they are made to be one size, and are then stacked horizontally or vertically depending on the available screen real-estate.

Infinite canvas

Facebooks infinite scroll is probably the most commonly used one. But infinite canvases are everywhere just like Cards. Presentations zoom and pan, web pages scroll, app windows show only part of the document. The use cases go on.

User Interface Inputs

The web is primarily used through graphical user interfaces, and mostly on mobile devices. Based on this premise isn’t it strange that so many designs still use the desktop hunt-and-peck-with-your-mouse style of elements?

Why do we right click links and chose to bookmark or open in a new tab? Why don't we drag the link to the side of the screen for a new tab, and to the bookmark icon to store it?

Despite huge success on mobile apps, the web still fails to recognise touch as a first class user input. Mouse clicks are already optional on many laptops. Ten years after the touch device started it's rise to power it is time for us to make the web reflect that.

Grid & Typography

In the last few years typography has turned the web from computer science book into a beautiful print poster. Finally we have access to technology like CSS grid that allows us to recreate any print layout. But why print?

Print design is all based on a set of constraints that have no value on the web. Most typography is created to fit fixed size sheets of paper. Worse still, fonts are set in rows with fixed heights. Do we really always need to scroll?

In stark contrast with layouts, why aren't we type setting based on screen size instead? Imagine if the font size was set to 80 characters across the screen. Or 200 characters vertically? What sort of grid could that produce?

So where do we go from here?

I don’t really know. The situation is extremely interesting. I’ll keep working on this, and post everything I think of right here. If you’d like to join in the fun, please contact me! Honestly, I'd love your help.

Your next steps

What is a user interface?

A lot of people I talk to are confused about design. Not least when they hear about abstract design such as web design, UX design, game design etc. I can't blame them. As designers we really tag ourselves with the word most appropriate for the task at hand. Even though our main work is always to solve problems by design. But let's make things easier For most designers working with abstract design the term user interface is crucial. But exactly what is a UI? Sure, it's the thing the user interacts with. But where does it start and where does it end?

User Interface Interface is a proxy layer between a human being and a function.

But what does that mean? For a pair of scissors, the scissors themselves are the user interface between a human hand and the function of cutting.

A computer has two layers of user interfaces between the human and most functions. The keyboard/mouse or physical UI, and the graphical or text based abstract UI.

But what if the user interface is a part of the function? The iPhone for instance doesn't really have a physical UI. There is nothing physical to interact with (excepting the home button, volume and mute controls but lets not digress from the example). But it does have a graphical abstract UI.

Why is this definition important? Because now we can all say user interface and know what we're referring to. No more wordplay to guess what the other person is talking about.

New design wrecks havoc just like new tech

As you've probably noticed my blog is moved and redesigned (not final yet) because I needed to speed up my site updates. Sadly my domain host is restricting me from completing the change faster but it will be done in a couple of weeks. Which is ironically very similar to the Moore's Wall phenomena that Raph Koster has previously talked about. Moore's Wall is basically states that because new, better and faster technology is usually thought to be the same as visual improvement (graphical in games) developers are implicitly forced to focus harder on visual representation then on interactivity or function. As technology improves this will become more and more work until development is so expensive that taking chances is never profitable.

Sound familiar? It's basically the current state of the games industry. Not until technological innovation has matured so far that new technology is not leaps and bounds faster or better then the previous tech or when the leaps between tech grow longer can we really focus on creating better gameplay.

Anyway, it's a great read and the basic idea is perforating my day to day life so check it out.