8 June 2016

Screenestate: Site redesigns... (Part 2)

So in Part 1, i discussed what I thought sites were/are doing wrong with UX. I may have levelled the charge that a lot of those sites would be better to navigate and consume on a mobile, vertically-orientated device. So lets see what browsing those same websites on a mobile, vertically-orientated device is.

Knowing where you are:

Like I pointed out last time, humans read across a bit and then down and across again. It works. Whether it's left to right or right to left, that's our thing. Developers of mobile interfaces understand this. It's why we have lots of scrolling on these devices because the viewing space is really limited (maybe 4-7 diagonal inches on average).

Even more telling are the design principles that went into the ergonomics of the iPhone (which was quite innovative at the time) compared to the more common horizontal orientation of the then-competing nascent smart phones. Now, all smart phones and tablets have that primarily vertical orientation for nominal usage, with the option to switch to a horizontal output for more media-friendly viewing. It works really well!

However, just as just before the revolution in interface design that was pushed forward by the iPhone (there were others, but Apple popularised it), we're in an interim period where interface designers have grown up with two familiar systems but are now contending with an explosion in pixel count and screen estate* and it is increasingly apparent that many designers out there do not know how to handle that effectively.

Worse still, there's a not-so-uncommon crossover between different orientations and resolutions when browsing the internet which is terrible. When this occurs, the website is displayed in its entirety on a mobile (small screen, touch) device or takes up a tiny portion of the large 1080p+ resolution display. This is supposed to be 'fixed' in the newer standards to come to the browsing world whereby devices, orientations, resolutions and bandwidth are all detected and adapted to. Unfortunately, much as with the history of the internet, complete adherence to standards can be slow to occur.

Knowing when you are:

The limited screen estate that was utilised by early screen orientations on CRT monitors and lower pixel densities up to about WXGA and UXGA resolutions worked out well. More recently, even though pixel resolutions have been climbing, they reached a general plateau as of around 5-ish years ago with laptops topping out around 768 vertical pixels and desktop monitors being at least 720 vertical pixels. Less common was 1080 vertical pixels but that is, or was, the ultimate thing to aim for.

Now though, we've blasted through the 1080p barrier while our media content is only just reaching 100% delivery on that front and the move to 4K resolutions (3840x2160) and Mac 'retina' displays (2880x1800 and 2560x1600) and iPad 'retina' displays (2732x2048 and 2048x1536) is putting a strain on the design philosophies of the typical UX designer because they are unfamiliar with this sort of resolution-to-screen size design space. When I say that, I'm talking about the contrast between the increased resolution at larger screen sizes of 1080 and 4K of desktop monitors compared to the increased resolution but static screen sizes of the more mobile-focussed devices such as tablets, laptops and mobile phones. BTW, those resolutions above are 16:9 and 16:10 respectively.

It's not just orientation but also a different way of filling the space of the available screen estate. I have to admit, I'm not envious of the current UX designer's job - it's not an easily amalgamable world out there!

So let's check out those mobile sites...

Ignoring the advertisements at the top of the page, I'm getting a nice vertical layout that is identical between 'real Ars' and 'darksite Ars'. Scrolling down a bit I get the chronological stories that help me browse to where I was last on the site. Okay, so each story is almost a quarter of the vertical screen estate but it works and it's easily scrollable.

Eurogamer is the same. If anything this points to a typical design philosophy - an accepted interface that works for this orientation.

Gamesindustry manages to get around five stories on the landing page - something that is just great for readability! The comments are also readily accessible and highlighted. If it came in a dark version then I think this would be my favourite mobile website design.

Moving on to the Gamerswithjobs mobi-oh, dear me... The desktop site was bad enough but this is just as bad. While the other sites I've looked at have been better to browse on the mobile interface, this site is actually worse - the panes are too large and require too much scrolling. There's no incentive to see what's below and even worse, the pane images are so large that they obfuscate the actual image proper. i.e. Seeing part of a picture usually isn't as interesting as seeing the whole picture as it was conceived and designed.

Once you get down a bit you have nicer slats of content. Why this wasn't the design for the whole site, I don't know. There is just so much of a paucity of information that does not guide the consumer. I look at this design and I wonder (as someone uninformed on how the website works) just what I'm clicking on...

Rockpapershotgun's layout is arguably worse... and better simultaneously. You get approximately one article stub per screen but each article stub has the introductory title, an opening image, the opening paragraph and the link to the main article itself.

It's information pauce but also individually dense in the sense that it focuses on each individual article with an unprecedented intent. In contrast to those sites tile their data with large images and no lead-in, it's a breath of fresh air. This design is also quite rare in my experience.

Moving on to the more technical sites, we see the familiar style of design from Ars Technica and Gamesindustry showing up again. It seems a standard affair but it is very readable and very effective.

Pharmaceutical online doesn't do so well in comparison: a less dense version of RPSes "title, image, lead" design but for a much less interesting topic.

Almost last, but not least, Pharmtech just shows mobile users its desktop website. At this scale, orientation and resolution you can see the design philosophy standing out but it just doesn't work on this orientation or aspect ratio. For shame!

Finally, I saved the worst for last.

Steam is one big advert (okay, in this instance, two) and any real content is far below the landing page. It's a testament to how bad the Steam storefront and webpages have become that I almost continuously see developers and consumers complaining about discoverability but the trend of the website has to become less usable if you don't already know where you're going and what you're doing.


We have a big problem looming (oh-ho!) in that UX design is behind the times when it comes to the meshing between modern resolutions and screen sizes and orientations. This is a huge amount of work to do on current implementations but also a huge amount of work to be done researching what is best industry practices.

However, the main trend over the last few years is for content to be curated by the website in question for its users' consumption. i.e. The editors of a site want to direct you to stories that they think are important and in order to do so, they have devised a strategy of making their curated content taking up more space.

Without altering the horizontal format that usual content-rich sites have traditionally used, this has resulted in the website designs moving to 'panes' or 'window' like designs within their own window, pushing new content off-screen, further down the site in order to entice the clicks of users on the preferred, curated content.

This curation of content goes against the traditional content-consumer relationship in that it pits the content creators against themselves and reduces discoverability for consumers which, ironically, reduces retention and the relationship between those consumers and the website brand.

You may question that last assertion but you only have to look at the supermarkets of the world to understand that 'confusion' is a fad that works temporarily to keep users searching around and buying more 'things'. However, at the end of the day, convenience is king - it is the main driving force behind most human desires - and the drive to confuse consumers in supermarkets is mostly over after a 10-15 year experiment to trap consumers into a cycle of 'discovery'. It doesn't work on the long term and so, instead, giving consumers what they want is the new objective of the day.

If only we could get that in web UX design...

*Hence this series of posts

No comments: