Alida Arteaga, Regional Coordinator

12 March 2021

UX for Different Screens: What Could Possibly Go Wrong?

Looking from the outside, adjusting for different screen sizes could seem one of the most daunting challenges in web design. This is indeed a complicated part of the job but also one full of exciting solutions. Sometimes, however, companies fail to account for two key aspects and we’re stuck with suboptimal implementations instead. Let's look at the good and the bad in no particular order.

Input Method

While PC solutions are created with both mouse and keyboard in mind, mobile is not that simple. Users essentially have an organic mouse replacement (fingers) and a keyboard emulator (on-screen keyboard). Fingers have less precision than mice when it comes to the click/touch area, while using on-screen keyboards for long is tiresome—even more so with modern 6.5” phones. 

The difference is not just about comfort: some actions that you can perform with PC input devices are not readily available on mobile. If a website or cross-platform app does not account for that, users will be extremely frustrated or perhaps completely miss out on certain functionality. In both cases, we are looking at users potentially quitting the product over what could have been easily prevented

Here’s a niche yet big example of getting this wrong, coming from a multi-million dollar performance tracker for gamers titled Blitz. The page reporting match results use badges with concise names to summarize the player's individual performance. Users need to hover over badges for full descriptions—except there’s no one-for-one replacement for hovers on mobile. Tapping the badge does nothing. Users can hold the finger over the badge (takes my gamer colleague about 10 attempts to succeed) and see the description, except: a) it crops out horizontally; b) the awkward front-end implementation opens your browser’s pop up to save the image of the badge. You can “force desktop site” to make sure the text box stays within the boundaries, but the element pop-up will still be the focus if not outright block the description.

Mobile: Trying to "hover" on mobile often leads to this pop up

Mobile: hard-earned hover description does not render properly

Desktop:  Pop-up is still likely but you can at least see the full text

Can small things lead to big blunders? Absolutely. Take a look at the SMS verification screen from Alfa-Bank (multi-billion dollar arms in Netherlands, Russia, Ukraine, Belarus, and Kazakhstan). The elements are so tiny and cramped that you can easily end up pressing the wrong button instead of actually confirming your payment. Depending on the website or app that prompted the transaction, you may have to go through the whole flow on both the merchant’s and the bank’s sides again. 

Imagine trying to press the Submit button with a finger

Last but not least, PC users have only one mouse while mobile users can utilize multiple fingers. Swiping to see more images or pinching to zoom in and zoom out is totally natural to them. In fact, users will appreciate it if you save some web page space by inviting them to use gestures instead of stacking too many pictures.

Layout

For quite a while before the pseudobezelness era, phones and desktops had seemingly the same aspect ratio of 16:9 (some laptops went for 16:10). The colloquial reference, however, has been rather misleading. Phones are used vertically, so a 1080p device would be 1080x1920 with an aspect ratio of 9:16, not 1920x1080 of 16:9. Phones with notches and punch holes go further than that with aspect ratios of 9:18.5 and such. 

Essentially, PCs have more horizontal real estate than vertical, while phones are vice versa. A classic desktop website with headers or huge horizontal lists will be a nightmare to use on a phone. These days, a very small number of websites will force you to switch phones to horizontal orientation or outright refuse to work properly. Most companies have already adapted.

Perhaps the most widespread example of desktop-to-mobile conversions deals with horizontal headers. They have been helping users navigate websites for over twenty years but would never fit into vertical-oriented devices. The go-to alternative is a hamburger menu, which can (canonically) be activated by pressing a squared button with three stripes. The solution has been drawing more and more criticism lately (for taking over the screen among other reasons), but, just like that dish with a piece of beef between two buns, it will most likely outlive entire generations. 

Telegram is perhaps the most notable example of a desktop hamburger implementation. The horizontal layout and extra space makes it less intrusive than your average mobile hamburger: the messaging portion of the app is not obstructed even in a 800x600 window.

Desktop width makes hamburgers less intrusive: 

As for lists, some designers go for carousels. They are a decent option when providing extra information for context but putting options for comparison into carousels is suboptimal. For example, comparing subscription plans gets extremely tiresome. Note that this can be a conscious choice with sales strategies that involve suboptimal options to prop up the one preferred by the business.

Perhaps the simplest adjustment is making horizontal things vertical in an almost one-for-one fashion. Does the desktop sign up form have username and password fields on the left with personal details on the right? Well let’s make vertical with each input field one after another. Naturally, gaps, headings, or any other separators for different types of information will be a welcome enhancement. Some websites combine the simple conversion with carousel, splitting a sign up form into multiple forms with navigation buttons between them. 

Desktop sign-up form: same-level elements are placed horizontally

Mobile: All fields are separated vertically