Why you should design for a tiny ruined phone
Dropping your phone might be the best thing you ever do as a UX/UI/digital product designer.
I’m a UX designer.
Which means I love shiny.
It means my pocket companion is usually no more than 2 years old.
It means that I’ll sometimes watch protective film being removed from the latest iPhone on a YouTube ASMR video. (Don’t judge me)
But we lucky UX-kids are those annoying classmates in school with the rich parents’ who brought home a PlayStation 2 the day it went on sale and won’t shut up about how epic TimeSplitters is.
You’ve heard it before: “You are not the user” as the infamous Jakob Nielsen quote says.
Our UIs look sublime on the latest devices. Novel solutions to the Apple Notch or camera punch-hole earn us waves of ❤️Likes on Dribbble. But these giant, pristinely preserved, edge-to-edge screens where the top-left corner has never been touched by a right thumb makes up only 20% of the traffic that finds our website, gowago.ch, today.
And even then, this is a freak number when you understand that Switzerland — where I live and work, and where disposable income is higher than the world average — is one of the only countries where high-end iPhones regularly outsell Android devices.
But this simple piece of advice from your friendly neighbourhood UX designer isn’t about breaking the False Consensus Effect. It’s about making your life just that bit easier.
The cheat-code to device-compatibility by design
75% of the traffic coming to our website, gowago.ch, is from smartphones.
2% of those devices have a screen 320 pixels wide, like an Apple iPhone SE or a smaller Samsung Galaxy.
2% of any popular website is already a huge number of people. But then consider that the vast majority of mobile devices in use in Europe and North America, like the iPhone 8 and Galaxy S9, have screens in the neighbouring 360 to 375 pixels wide range.
That’s why my cheat-code is this Apple iPhone 5S in Space Grey.
Bought in 2013.
Dropped in 2015.
Screen replaced by a dodgy market-stall cowboy.
Mysteriously shatters in a pocket 5 days later whilst 1000km away.
Orange screen-burn casts across the screen like an infection.
Fingerprint reader dead.
Home button unresponsive.
A silent-mode switch that’s as unstable as my sanity in an MVP planning meeting.
A screen smaller than on any major handset you can buy today.
And now sits as king amongst it’s kingdom of laptops, screens, tablets, studies, and peripherals all creating new outfits to bestow upon it’s aftermarket, warranty-breaking face.
The reason — as I’m sure you brainy bunch have no doubt concluded — is simple: If a UI works on this device, it will work on almost any device still in use. (Except maybe those still on Blackberry devices — Sorry)
A small phone, sure, but why does it need to be broken?
Research by SquareTrade found that around 5,761 smartphone screens break every hour in the USA alone!
38% of cracked screens don’t get fixed, and 2 in 3 people admit they would not repair a damaged smartphone that still worked!
Much like trying to face-unlock your iPhone whilst wearing a face mask, or calling to God on the Big White Telephone in a nightclub bathroom when your Uber home is already waiting outside; a broken phone is a situational disability.
A situational disability is often a temporary disability. Like if you require glasses, but can’t read the WhatsApp message that woke you at 4am from some dude you shared your university dorm without first sourcing your spectacles. Or the situational disability brought on by alcohol, as your limited focus fat-thumbs a university roommate instead of your sober partner who promised to collect you after your studio’s Christmas party.
You too will have experienced a variety of situational disabilities that impact your experience of using your phone. Most of us can empathise with the deflation of picking up your dropped phone to find the screen shattered, and the weeks-if-not-months of living with your mistake afterwards. If you’ve never dropped your phone, consider yourself lucky. And if you don’t believe in luck, consider yourself a justifiable winner.
This is where I bring out the scary A-word almost every UX/UI designer says they care about, yet few have read the WCAG 2.0 and grimaces at the idea of carving out the time to test their colour contrasts or navigate with a keyboard: Accessibility.
But you see, accessibility is only boring or restrictive if you don’t consider that you’re already designing to restrictions.
You decided you click the iPhone 11 artboard size in Sketch, you decided white-text on a blurred background image looks pretty swish on your high dynamic range Super Retina XDR OLED OMG screen.
And yeah, it looks frickin’ sick in your Dribbble glamour-shots.
But my got-stuck-in-the-middle-of-a-bar-brawl iPhone 5S can’t display varying shades of grey in your snazzy nav bar. And this too-small-to-jockey-a-winning-stallion device can’t even display your menu button when it’s pushed 100 pixels off the right-side of the screen by a min-width, or disappears into a Frankenstein’s monster of layout issues when forced to fit the 320 horizontal pixels I can afford.
So what can I do?
If you do just one thing…
Start small, work your way up.
You’re probably already doing mobile-first design. But are you doing smallest-device first?
If you look at Dribbble today, almost all mobile shots are on iPhone X or equivalent Android devices. But unless you skipped the backstory and scrolled straight to this recipe, you’ll already understand that such devices make up only ~20% of those in use.
That’s not to say that people aren’t designing for smaller devices first, and creating higher-resolution alternatives for display purposes. But, c’mon, when was the last time you had the free time to do that?
Mobile-first design was originally born out of ‘designing for smaller devices and adapting for larger screens is easier than the other way around’ long before mobile was the most popular way to consume websites. The same applies to go from smaller phones to bigger ones.
Designing small-to-big is easier than big-to-small.
So the next time you create a new mockup in Sketch, click ‘iPhone SE’ or set your artboard width to 320px. Easy.
But even better would be to…
Dig into that drawer of old USB pens, old charging cables that almost caught fire, and miscellaneous electronics, and dig out an old device. You may not use it anymore, but remember it’s still the daily carry for plenty of your users. Alternatively you’ll find plenty of iPhone 5S’s and SE’s selling cheap on eBay, Craigslist, Gumtree, CeX, or Ricardo from people who are clearing out their own drawers of miscellaneous electronic relics.
Test your designs on it. If you haven’t seen your website or app on a screen this small before, best try it ASAP.
Whenever I’m working on a design in Sketch, I have the Sketch Mirror companion app testing out UI decisions as I work. Quickly you’ll find that you’ve switched to designing for your little desk companion rather than the 27” behemoth.
And if you’re a real pro…
Get one with a ruined face.
If you don’t have a phone with a shattered screen, drop me a tweet and l’ll drop it for you.
