Screenestate: Site redesigns... (Part 1)

A week ago I awoke and immediately went to one of my favourite websites on the internet: Ars Technica. I received quite a shock when seeing that the site had been redesigned. The change has since been reconsidered and reverted to the old site design in the face of huge user backlash.

There are several problems with the redesign but let me first talk about the apparently modern/current website design trends and why current UX designers (and UX designers in training) should be shaking their heads at such implementations on desktop.

Regarding this topic specifically, I feel the need to point out that the points I'm making here are from my own personal preferences and biases, except where I'm making an empirical statement - though that doesn't happen often in opinion pieces like this! Normally, I assume people understand this when reading content - however, it seems that few people remember this when reading opinion pieces. I'm making these points in support of my argument and preferences. Other people may have different preferences and so might find these arguments unpersuasive. 

Minimalist vertical:

Back in the old days of computers and televisions - devices with screens - we had a 4:3 ratio as standard. Content was designed for these screens and, as they approached a certain size (let's say 19 - 24"), you could quite comfortably view a representation of an A4 piece of paper on the screen that was very similar to the actual size of the physical paper you would get. The reason this is important is because A4 is a popular size of document for a couple of reasons:

• It's a comfortable size to hold
• You can get a good amount of fairly dense and sparse content in a widely readable presentation on it
• The industry can easily calculate its cost per weight and content industries can scale between the different A series sizes without having to redo the artwork
• Humans find it comfortable to read in a vertical manner - you can see this in almost all of our historic writings*; we write horizontally a bit then go underneath that first line.**
• It also looks good in a horizontal format

So, A4 is a good idea of the sort of size and ratio that humans find easy to use both visually and physically.

You can also argue that 2:3 and 4:5 (as seen in camera formats) and 9:16 or 10:16 (HD video formats) are good too.

However, there is a general rule here that what is comfortable in a vertical sense isn't as comfortable in a horizontal sense:

A4 is usually better suited to a vertical orientation for viewing information dense content whereas on the other end of things, 9:16 and 10:16 are more suited to horizontal orientation because those ratios are generally used for viewing information scarce content. Obviously, when it comes to art, all bets are off but I'm concentrating on presentation of information on websites as the background here...

It may just be a facet of our physiology because our eyes are better suited at looking up and down than moving side to side without moving our head but that argument might be something for an anthropologist and a physiologist to discuss between themselves!

The take-away point here is that humans, on the whole, are able to absorb more information, more easily, in a vertical space with a short horizontal aspect than in a short vertical space with a long horizontal aspect. We're looking at something akin to a vertical aspect ratio of 1.45 being ideal for dense information consumption with a horizontal aspect ratio of 0.56 being better suited to information sparse consumption.

The recent trend has been to move to less vertical content within a given 'screen' for the user to browse from. This allows the user to see, more clearly, the presented content on a smaller screen. It may be a design in-road from touch interfaces but then so is the next UX trend:

Content sparse:

One recent trend is to provide larger content boxes across the screen. I'm pretty sure this is a cross-over from touch screen interface designs but on modern PC screens it doesn't really work. While it presents a strong focus on a few items of your website content and might cause those chosen stories to get more traffic, it causes the user to either A) accept what is presented and stop there, or B) scroll, scroll, scroll down the website.

On a touch interface device, this is the de facto standard of media consumption due to the limitations on accuracy of the user input. Outside of that, there is little reason to drag those conventions over to other media and devices because there are no gains from a user perspective other than potential familiarity... and the familiarity argument only works if we assume that the touch interface came before the other types - which it did not.


Click-through:

Another trend of recent is the content aggregator links at the bottom, side, mid- hell, all over the article and websites in question. These provide a constant stream of information to the consumer, allowing them to browse content on linked sites without having to navigate back to the main page. 

This is also a draw-in from the touch interface UX: the 'flow of consciousness'*** is a design popularised by Apple and iOS after the release of the original iPhone and Safari (or whatever that variant was called) launched.

It's a design style that is at odds with home pages, directories, listings and tree designed sites and, due to the popularity of iOS and Android devices, a lot of UX designers have fallen for the lure of this temptress because it gives the site content creators a measure of control, easily digestible usage statistics****,  and a way of controlling what content each visitor sees in order to ensure the 'maximum retention' in their website ecosystem.

But here's the rub...

It's important to remember that, while you, the content producer are the gatekeeper of what content gets published on your site and are responsible for ease of discovery, you are not responsible for telling your consumers what they want to consume.

Websites are a buffet selection and you have to understand that there is a very specific psychological mindset to eating at a buffet. Placing two or three items across a massive table, behind which the rest of your selection can be found by digging around in the shadows, is not a good use of your resources because of the psychology involved.

People choose to go to a buffet instead of a normal a la carte meal because they want to sample many different things. There is also some portion of their desire to get as much food as possible for as little as possible but, if buffets did not make money because people's eyes are bigger than their stomachs, then they wouldn't still be being held!

This means that people want to be able to sample as many things as possible, as easily as possible, without having to scroll off the initial landing part of the front page. Similarly, people also don't want to have to sort through lots of visual clutter in order to be able to understand what they're looking at or what they're looking for.

It's tempting to think that you can predict the things a person wants but, at the end of the day, people are so diverse that this sort of endeavour is self-defeating if taken too far... and too far is what we're currently getting in UX design. Like an over-active spell-checker, websites have become the Clippy of our times.

Which means that, ironically, websites are now more readable on mobile devices than on the desktop or larger screens because they have to present a maximum of information in a minimum of space.


On to re-designs:

Your screen is supposed to open a world of information to you, as the user. It's a gateway to possibilities and, to limit those possibilities through obfuscation is a cardinal sin in the UX world.

So let's talk about the aborted Ars redesign.

I was lucky that they switched back to the old design because I had no screenshots of it! Who would expect to have to need them?

Above is the previous, now current, design. It's not perfect - lots of wasted space on a 1360x768 screen, especially at the sides, but I get a good vertical design sense to the home page: Not only do I have those chronological stories on the left, but I also have the 'Editor's picks' on the right too.

This is, of course, a lie.

This is not the real Ars Technica. It's a facade that I've grown to love and understand as the Ars Technica I interact with but it's just a choice. The designers gave the users a choice: accept our design preferences or have some options to go on top of those choices. This is the real Ars Technica:

I see two articles on the screen and about 40% wasted space...

This was the old design. From this starting point I can see how people, actual people who considered the design's evolution to the new site, viewed the viewship's interaction with their content.

I also see how those same people, seeing that the majority of their users interacted with this base design, chose to forge ahead with a reinforcement of this design. Behold, the new (proposed) Ars Technica:

Now, I'm a bit biased because the 'brackets' as a design concept were introduced to me in around 2006 as a re-branding of my then-company... This vertical interpretation of them is worse than a horizontal interpretation of them but I guess it's all just an exercise in branding/wanking.

Okay, it's wider. That's a positive. It also gets rid of the wasted space around the site name and menus. However, it cranks up the two-story curated content to 13.

I have to ask myself: "What is my purpose for visiting this site?" (I subconsciously ask myself the same thing for all websites, of course!) and, this being a technical-focussed site, I reply (subconsciously) "The acquisition of information".

Maybe you disagree with me but this layout, even the unadultered previous layout, is information sparse. It's positively anaemic; vacuous in its design and presentation.

Before I run through the design themes and ideas, I'll briefly posit this:

The reason the majority of the Ars readership access the site's content through the information sparse regime is because of the quality of content, not because of the layout. 

At the end of the day, Ars's viewing options are hidden behind an inconspicuous menu system that is obtuse in this day and age for users who are not used to being offered options in their consumption. Let's make an analogy: If viewing Sky's pause on demand live TV was a secret menu option instead of a well-promoted activity in their marketing then I am sure than virtually no viewers would make use of it. This is the unequivalent of the Ars Technica way of doing things. Site optional features are hidden and not discussed or highlighted but their use is considered a declaration of user's preference.

This is a classic causative-effect application whereby the cause and effect are convoluted into a use continuum. Ars' staff's defence of the newer design was predicated upon the majority of their readership using the default state of the website. What they failed to understand was that the majority of their readers would never explore their menus, offering the options such as white-on-dark or chronological story order. In fact, I only discovered it because of a comment on an article during the last redesign.

Their statistics were biased before they even began the redesign.

This is, surprisingly, a novel problem for sites such as Ars Technica because they define themselves upon their scientific and technical background. I might expect it at sites that are user-focussed but less critical in their scope but at a site like Ars, it not only sounds a death knell regarding authorial intent but it also heralds in an era defined by click-through content as opposed to the buffet-style users might be used to.

One last thing to mention, it seems that, at least subconsciously, the designers at Ars Technica are also aware that people tend to read in a vertical fashion (a la the A4 discussion at the top of this page) because they limited the site width both before and after the redesign. Granted, they widened the content block in the new design in response to new, wider screens but I don't think that is necessarily a good idea because, although the site fills more of those higher resolution displays (really, how many people are on 4K right now? A tiny minority!) it doesn't make it more readable in a vertical manner making the increased width a moot change.


Let's talk about other sites:

It's not just Ars that is on this creative bandwagon. There are plenty of other sites that are getting in on the act:

I see the CryEngine is big in the industry news right now! It's a third of the page, almost!

Gamesindustry had a redesign over two years ago that pushed this particular user experience. You get to see four curated stories, the menu and an advertisement before having to navigate (remember when that translated to hyperlinks?) through the landing page to view the rest of the content. It's practically a carbon copy of the Ars site design except that there's more wasted space in the header...

I can't fault the menu design or the actual curated content. The relative size of the banner and marketed content is debatable. However, the main problem here is that users inevitably have conversations in those curated stories but have no way of tracking those conversations once those curated stories are lost and they get pushed around a lot! As I mentioned before, the mobile site is much more readable and 'followable' because it flows in chronological order.

One full article...

Gamerswithjobs, once one of my favourite sites, became unreadable on the homepage relatively recently. I'm sure it looks great on a mobile touch input device but, seriously, are users supposed to navigate the site's content based on this terribly scaling tiled curated content?

The menu system is great. The iconography is way too small and the tiles of content are way too large. It's a mess.

This is one of those sites that you can really point at and see the degradation of content versus pixel space. It marks a particular focus on specific content creators. However, this philosophy fails to realise that new users will not stick around to visit the forums in order to keep the site ongoing, no matter the quality of the articles (that they can't see). It also looks like a mobile site was translated directly to a desktop environment, I can see how, excluding the side bars, a more vertical ratio would improve the layout and readability...

This is your Doom!

It's not just new content websites that are falling into this trap. Steam has been swirling around the drain of content paucity for quite a long time. Just looking at this screenshot of their homepage shows their lack of information: a whole screen based on one product.... Okay, there's Firewatch there too...

Even switching to the application you get a minimal landing page on the storefront:

It's a wonder that anyone buys anything other than the first two items they see!

Rock, paper, confusion...

Even, information dense, PC focussed sites like Rock, Paper, Shotgun, are in on the act too. This is a new one for me: not only is it information scarce in terms of article content, it's simultaneously information dense in terms of article descriptors! But, hey!, the menu system is really nicely laid out at the top there! Oh, I can see the title of one chronological article too!

The RPS designers are also acknowledging the vertical reading habits of people and have adopted a left-hand-side pane as opposed to a centre pane. Personally, I find this more appealing on desktop screens. However, it doesn't hold up at larger resolutions and the content becomes centred at 1920x1080.

Even Hotmail is in on the act!

Hotmail, one of Microsoft's properties, also has been the recipient of a recent update, making it less usable... The top black bar wastes precious vertical space, the email list now has a maximum of seven emails visible on the screen. If you have flagged emails, they no longer are limited in their visible number and instead take up as much space as possible. You can switch the view to see only new emails but I find that useless. Also, the select all tick box now only selects the visible emails and you have to go through another click on, for some reason, really tiny font in the middle of the live pane to the centre-right of the interface in order to select everything*****... plus, all the other options you would normally associate with selecting items, like 'flag' or 'move'.

You can resize things a bit but the way I have it set up above is the most usable due to the designers requiring a small border around all text.

So, how do sites that require a large amount of information dense content present themselves?

New empty space, more like!

Meh...

It's full of stars...

My God!

It's the same as it's always been. Design trends will spread and multiply. Designers will, for the most part, share the same ideas despite lacking in their own - maybe because of the psychology of not being different (aka peer pressure). The ubiquity of these similar designs shows a sort of pathos regarding the user experience - these people want to engage the user in some way that they control but in doing so reduce their overall exposure.

Someone recently said (in an Ars Technica defence of their new layout) that scrolling is now an accepted way of browsing websites.

That's completely true. However, that truth is predicated on the knowledge that the average user wants to dive deeper into the website's home/landing page. Seeing articles they are or aren't interested in will drive people downward. Seeing a non-landing page for one or two stories will not keep the user's attention because they don't want to scroll down for an unknown reason.

I hope we're reaching the end of these design principles and that some successful site will come out with a new design that completely trashes current 'use trends'. I'm doubtful this will happen due to the whole biased design underpinnings I explained earlier in this article. I know things will change, I just hope they change for the better.

Next up, I'll take a look at the mobile sites for these same webpages!



*Even hieroglyphics and runes!

**There are, obviously, exceptions to this such as the Bayeux tapestry but I'd argue that, at least in this case the tapestry feels more like a moving image than static text. It's like a medieval movie, explaining things to probably a mostly illiterate viewership.

***I don't know if it's officially called that but this is what it feels like to me when browsing like this.

****It's easy to follow which types of article appeals to a 'type' of person if they follow directly on from each other click-wise.

*****This has since been changed in an unannounced update.